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لمبد ع : 
تصميم مم المد 
الغلاف للمصمّم 

ن 97 


ند عبدالعر 
یدز علد 


ی & ۲۱۲۱۷15 


(الخطوة الأولى نحو البرمجة للویب) 


المهندس مختار سید صالح 


جمیع الحقوة: محفوظلة ال اه 


الإهداء 


إلى أعلى نخلتين على ضفاف القلب .. 


والديّ حفظهما الله. 


مه 


نویه 


فرغتُ من تأليف هذا الكتاب في الأشهر الأولى من عام ۲١٠١‏ ۰ و كنت قد عقدث العزمَ على 
إصداره مطبوعاً كأوّل كتاب عربيٌ في موضوعه » حاذياً بذلك حذو أخيه و سابقه (تعلّم 2677)ز 
في ۱۲۰ دقيقة) » لكنّ مشيئة الله قضت ألا تتهيّأ الظروف الملائمة لذلك حتّى هذه اللحظة بعد 
انقضاء خمسة و عشرين شهراً على إتمامه » و لأنَّنِي أؤمن أنَّ قيمة عملٍ كهذا تتضاءل مع مرور 
الوقت فقد رأيت -بعد تفكير- أن آنشره مخلصاً بشكلٍ مجّاني بصيغة الكتاب الإلكترونيّ (501) 


لعل أحد الدارسين ينتفع به لمّا كان نشره بهذه الصّيغة لا يتطلب متي أكثر من كتابة هذه الأسطر. 


مختار 


البوكمال ۲۰۱۳/۰/۱۰ 


بين يدي الکتاب 


بسم الله الرّحمن الرّحيم » و الصّلاة و السّلام على نبيّنا محمّدِ و على آله و أصحابه أجمعين» و 


بعد: 


لم يَعْد ال ۷۷۵۵ اليوم مقتصراً على تقديم المعلومة بشكل نصّي بسيطء حيث أصبح من المهم تقديم 
المحتوى بشكل و أسلوب أقرب ما يكون إلى الاعلامي» بل ربّما هو كذلك فعلاًء فقد أصبح من 
النادر -برأيي- أن تجد في مواقع ال ۷۷60 اليوم -و أعني المواقع الجيدة منها- ما لا يقدم 
المعلومات بشكل مسموع و مرئي إضافة إلى الشكل التقليدي المقروء و هذا من ناحية» أما من 
الناحية الأخرى فقد تطوّر ال ۷۷۵0 ذاته كفهوم مع بدء التنظير لما يعرف بال 2.0 ۷۷۵0 عام 
۲ و هذا ما أذَى بالنتيجة إلى ظهور الحاجة لتطوير الأدوات و اللغات البرمجية التي كانت 
بين يدي مطوري و مصممي مواقع ال ۷۷۵۵ و التي أصبحت قاصرةً عن تحقيق متطلبات العملاء 
الطموحين بامتلاك مواقع ويب عصرية و التي سرعان ما قام من يهمه أمر التقنية بتطويرها و تقديم 
إصدارات جديدة منها أقوى و أكثر تأقلماً مع ۷۷۵0 اليوم» ذلك لأنّ "التأقلم يعتبر أساس النجاح في 
عالم ال ۰۷۷60 


یناقش هذا الکتاب أحدث إصدار لكل من لغتي ۲۱۲۷۱ و 055 اللتان تعتبران الخطوة الأولى 
لأي مطوّر ۷۷۵0 إذ یقوم بشرح لغة ۳۱۲۱/۲5 بعد التمهید لذلك من خلال شرح ۲۱۲۸ التقليدية 
من الصفر و من نم معاییر ۳۱۲۱/۲ من الصفر أيضاًء كما یقدم هذا الکتاب شرحاً مفصّلاً ل 
3 بعد التمهید لذلك من خلال شرح 055 النقليدية من الصفر أيضاًء و بهذا فان هذا الکتاب 
یتألف من فصلین: 
۱- ۳۱۲/۲5: يناقش هذا الفصل الاصدار الخامس (و الأحدث) من لغة البرمجة النصيّة 
التشعبيّة ۲۱۲۷/۱ بشکل مفصّل و مندرّج و يضمن لقارئه أن یکون قادرا على كتابة 


صفحات ويب بالمحتوى الذي برغبه و بالشکل الذي پریده باذن الله. 


۲- 0553: يناقش هذا الفصل کامل المزایا التي یقدمها الاصدار الثالث (و الأحدث) من 
آوراق الأنماط الانسيابيّة 085 بشکل بسیط و مفهوم» و يعد قارئه أن یکون قادراً على 
تجمیل المحتوی الذي قدّمه في صفحات الویب التي نعلّم کتابتها في الفصل الأوّل. 
۳- كي یکتمل الحدیث عن البرمجة للویب من طرف العمیل ٩5:06‏ 0۱601 كان يجب أن 
يكون هناك فصل ثالث بتحدث عن لغة 56/101 2۷2 و لکن و لأنني من آنصار الحداثة 
(و السهولة) فیما یتعلق بالتقنیات البرمجية فانصح القاری العزیز بقراءة كتابي 'تعلّم 
از في ۱۲۰ دقیقة" أو أي مرجع یتحدث عن لغة 6۲۷ا ۵ز بشکل واضح و مبسّط 
بعد قراءة هذا الکتاب أولاًء لأن 02/6۲۷[ هي البدیل العصري للغة 561104 ۷4هل برأيي. 
مّا عن طريقة عرض الأفكار في هذا الکتاب فقد حاولت و اجتهدت كي آجعلها غير مملّة و لا 
معقّدة و لا شبيهة بالمحتوی المتعب الذي كثيراً ما عانیت منه في الکتب التي تناقش لغات البرمجة 
للأسف و يمكنني أن آقول أن هذا الکتاب لا يفجّر عشرات الأسطر البرمجيّة غير المفهومة دفعة 
واحدةً في وجه قارئه دون توضيح لهاء كما أنه لا يطيل أكثر من المطلوب في عرض الفکرة» لكنه 
باختصار يقول ما يجب قوله فقط دون أن يغفل أي جانب من الجوانب التي تتوجب معرفتها. 
ختاماً أسأل الله أن يتقبّل هذا العمل و أن يبارك فيه و يكتبه صدقة جارية من باب العلم الذي ينتفع 


به و أن يلهم قارئه الفهم و الحفظ و الصبر على التعلم. 


البوكمال ۲۰۱۱/۸/۲۸ 


الفضك روم 


HTML 5 
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مقدمة 


يناقش هذا الفصل لغة 5ا1۲ التي تعتبر حجر الأساس في انشاء مواقع الويب» و لاتنا لا 
يمكن أن نتحدث عن ۳۱۲/5 مباشرةً فسيناقش هذا الفصل لغتي ا17 و 171/1 أولاًء و 
البداية مع لغة ا١‏ 1۲. 


ما هي HTML‏ ؟ 


إنَّ 1101لا هي اختصار 200۳6۷12100 الحروف الأولى من الجملة Hyper Text Markup‏ 
6 و التي تعني بترجمة غير حرفية (لغة وصف صفحات الویب)"» و هي ليست لغة 
برمجيّة» لاء بل هي لغة وصفيّة Markup ١3090101396‏ لأنّ ۲۱۲۷/۲ تستخدم مجموعة من 


الوسوم 13905 لوصف صفحة الویب. 


أمّا الوسوم ۲205 فهي کلمات أو آحرف محددة مسبقاً ۷6۷/۷0۲05 تحمل معاني خاصّة» و تكون 
محصورة بين قوسین من الشکل < > مثل <0> و <۱0۳0ا> تأتي الوسوم في الغالب على شکل 
آزواج مثل <0> و <0/> یدعی الوسم الرّل <0> بوسم البداية ۲29 86017 أو وسم الفتح 
9 ۰0060۳9 و یدعی الوسم الثاني <0/> بوسم النهاية 129 2۳0 أو وسم الاغلاق 


.Closing Tag 


يتم كتابة مستندات ا1۲۷ باستخدام أي محرر نصي بسيط (مثل 0016030) أو منقذم (مثل 
۲ او 0٥‏ اوناوا۰)۷ و يتم تخزینها في ملفات تحمل امتداداً 66051010 من 


الامتدادين التالیین : ۰010۱ أو 00 و بالطبع لا بوجد أي فرق بینهما. 


" لا أعرف إن قام أحد قبلي بترجمتها بهذه الطريقة لكتني آشعر آنها الترجمة الأنسب. 


تتکون مستندات ۲۱۲۱ بشکل آساسي من محتوی نصي عادي با لاضافة إلى مجموعة من وسوم 
,۱ و في الحقيقة فان مستندات ۲۱۲۷ تدعی ب(صفحات الویب) 239065 ۷۷۵۵ و يتم 
استخدام برنامج خاص لقراءة هذه المستتدات یعرف هذا البرنامج پاسم مستعرض الویب Web‏ 


۲ او من أمثلته ۲ Internet‏ و Firefox‏ و Google chrome‏ .. إلخ. 


الهدف من مستعرض الويب هو قراءة مستندات HTML‏ و عرضها پشکل صفحات ویب» بمعنی 
أن مستعرض الویب لا يعرض وسوم ا1۲۷ کنصوص بشکل مباشر و لكنّه یستخدمها لانتاج 


كيف أبدأ في تعلم كتابة مستندات ۲۲۲۲۲ ؟ 
كل ما تحتاجه لكي تبدأ في تعلم كتابة مستندات ۲۱۲۱ هو محرر نصوص (مثل ۱۱0/6020) و 
مستعرض ویب (مثل ۲0۱0۲6۲ ۰)۱۳۱۵۲۳6۱ بعد ذلك يمكنك قراءة الفقرات التالية و التعلم خطوة 
بخطوة و أؤكد لك أنّ آفضل طريقة للتعلم -برأيي- هي كتابة الأمثلة التي ستصادفك لاحفاً بشکل 
مباشر باستخدام محرر النصوص و من تم اختبارها باستخدام مستعرض الویب. 
المثال الاوّل في لغة ۲۱۲۱۷ 
سنقوم الان بكتابة آول صفحة ۲/۲۱ معاً باتباع الخطوات التالية: 
نقوم أولاً بفتح آحد محررات النصوص و ليكن المفكرة ۱۷006020 على سبیل المثال و نکتب 
الشيفرة التالیة: 

> 1 

<head> 


E E LOZ 


My first HTML page 


> 5121862 


</head> 
<body> 


<P> 


Welcome to my first HTML page! 


ثم نقوم بحفظ الملف باسم .1۳51۳296 


Libraries‏ حصنت 


System Folder 


Mukhtar 


System Folder 


Computer 


System Folder 


5 Network 
System Folder 


ب 


ا 


_AppDev 


Encoding: ANSI -| ۱ Cancel 


الشكل ۱ : كتابة أول شيفرة ۲1۲۱1 في برنامج المفكرة و حفظ الملف 


۳ 


ع۸ 52۷6[ 


© ۳ Desktop ٠١ 


Organize > New folder 


* Favorites 
WI Desktop 
وا‎ Downloads 


2% Recent Places 


9 Libraries 
يك‎ Documents 
الى‎ Music 
يكل‎ Pictures 
3 Videos 


iM Computer 


File name: "firstPage.html'| 


Save as type: Text Documents (*.txt) 


Hide Folders‏ اه 


Ez 
< OCS 


> 1 


firstPage.html - 9 


File Edit Format View 
<html> 
<head> 


</html> 


ملحوظة : لحفظ الملف بلاحقة مختلفة عن اللاحقة ۰۵4 هناك طريقتان» الأولى أن نختار الخيار جميع الملفات 


*.* من القائمة المنسدلة حفظ ك 1۷06 25 92۷6 الظاهرة في الصورة أسفل اسم الملف ثم نكتب اسم الملف و 


لاحقته بشكل عادي» أمّا الثانية و التي أفضّلها شخصيًاً فهي أن نضع اسم الملف مع لاحقته المطلوبة بين علامتي 


اقتباس مزدوجتين و نختار حفظ كما هو موضّح في الصورة أعلاه. 


۱۷ 


الان و بعد أن قمنا بحفظ الملف بالاسم 151۳296.۱] نقوم باستعراضه باستخدام أحد 


مستعرضات الویب و لیکن 8 ۲۵۱0۲6۲ ۱0۱۵۲066 على سبیل المتال لنشاهد الشکل النهائي 
للصفحة كمايلي: 


72 My first HIML page - Windows Internet Explorer 


0 | € C:\Documents and SettingsiM ¥ || 6 <> ۱ م‎ - 


1 0 2< 
1 3 € my first HTML page ۱ EM” © fh  ::۲ Page + IGF Tools ۰ 


Welcome to my first HTML page! 


Done و‎ My Computer 


الشكل ۲ : الشكل النهائي في المستعرض لأوّل صفحة مكتوبة باستخدام ۲۱۲۱۸1 
كما ترى فقد قمنا بكتابة صفحتنا الأولى باستخدام لغة ا١1۲‏ و هذه الصفحة تحتوي على نص 
ترحيب بسيط هو النص 02961 ۲۱۲۱/۲ elcome 10 my first‏ تم توليد هذا النص باستخدام 
الوسم الخاص م و بتصوري فان هذه الصفحة على بساطتها ستكون الباب الواسع للدخول إلى لغة 
۱ ان قرأت الفقرات التالية بقليل من الترکیز . 


عناصر ۲۱۲۲/۲ 


تتکون کل صفحة من صفحات ۲۱۲ من مجموعة من العناصر ۱6۲۱605 يتم إنشاؤها 
باستخدام الوسوم 1395 و الوسوم كما قلنا سابقاً عبارة عن آحرف أو کلمات تحمل معاني خاصة 
بالنسبة لمستعرض الویب و غالبا ما تکون آسماء الوسوم عبارة عن اختصارات لکلمات إنجليزيّة 
فالوسم <0> مثلاً یستخدم لانشاء العنصر المسؤول عن عرض مقاطع النصوص ۳۴۵۲۵9۲2005 
ضمن صفحات ۲۱۲۸ و الذي سیتم مناقشة عمله مع عمل باقي الوسوم بشکل تفصيلي في 
الصفحات التالية. 


5 


تحصر الوسوم بين أقواس من الشكل < > و من أمثلتها الوسم <!۸۲0> و الوسم <0620> و 


الوسم <1118]> و الوسم <000۷> و الوسم <0>. 


لكل عنصر من عناصر ۲۱۲ وسم بداية 129 86017 و وسم نهاية 129 00 تکون وسوم 
البداية محصورة بين القوسین < > أمّا وسوم النهاية فتکون محصورة بين القوسین السابقین مضافاً 
الیهما رمز الخط المائل / المعروف ب ٩۱25‏ بالشکل < /> و من آمثلة وسوم النهاية الوسم 
</html>‏ و الوسم </head>‏ و الوسم </title>‏ و الوسم </body>‏ و الوسم </p>‏ و يحوي کل 
عنصر من عناصر ا1۲ بين وسمي بدايته و نهايته نصا عاديا لعرضه (كما فعل العنصر م 
في مثالنا السابق) و يمكن أن يحوي أي عدد آخر من عناصر ا1۲۷ شرط الالتزام بترتيب 
متناظر لوسوم النهاية و البداية» فعند كتابة وسوم النهاية يجب أن پُراعی الترتيب فيتم كتابة وسم 
النهاية الخاص بوسم البداية غير المنتهي (الذي ليس له وسم نهاية) الأقرب فالأقرب» ففي حين أن 
الترتيب التالي يعتبر صحيحياً: 
> 
<body>‏ 
O‏ 
تق عادى ستنم حرضته قى السمستصرض! 
<< > 
</body>‏ 


> ۳1 3 


لأنّ وسم النهاية الأول <0/> جاء لانهاء آقرب وسم بداية غير منتهي و هو <0> في مثالناء ثم 
جاء وسم النهاية </0001/> لانهاء آقرب وسم بداية غير منتهي و هو <[000©» نم جاء وسم 


النهاية </0۸۳/> لانهاء آقرب وسم بداية غير منتهي و هو </۱00>. 


فان الترتیب التالي یعتبر خاطنا: 
<html>‏ 


<body> 


<P> 
</body> 
</html> 


0 


لأن وسم النهاية <0۵0/> جاء لإنهاء الوسم <000> الذي لم يكن الوسم الأقرب غير المنتهي 
للأسف و الحالة نفسها تكررت مع وسمي النهاية <01مأط/> و <0/>. 


الخلاصة: لا تنس كتابة وسم الإغلاق و راع ترتيب وسوم الاغلاق. 
الفراغات White Spaces‏ 


في لغة ا١1‏ لا يوجد أي قيمة لمحارف الفراغات (مثل ٩0206‏ و 20 .. إلخ) عند استعراض 
الصفحات باستخدام مستعرض الويب و الما تستخدم محارف الفراغات لغرض ترتيب الشيفرة و 
جعلها مقروءة بشکل أوضح فقطء فقراءة شيفرة ۲۱۲/1 التالية على سبیل المثال: 
> 
<body>‏ 
AL‏ 
Hi!‏ 
ARLES‏ 
7 < 


</html> 


آسهل بكثير من قراءة شيفرة 1۲۷1 التالية: 


> ۲01 <>10007<>91 ۳ ۲/1 <> 00۷/۲ 


۱ 


أ 


مع أنّهما متماثلتان تماما عند استعراضهما باستخدام مستعرض الویب. 


فائدة : من العادات البرمجيّة الجيدة إزاحة كل المحتوی الموجود بين وسمي بداية و نهاية متماثلین بمقدار ضغطة 


0 و البعض یفضل إزاحتها بمقدار ثلاث فراغات (ثلاث ضغطات على مفتاح 50266). 


الشکل العام لعناصر ۲۱۲۲۷1 


يتم وصف عناصر ۳۲۸ باستخدام الوسوم» و فيمايلي نعرض الشکل العام لعنصر ا 1۲: 


» يبدأ عنصر ا11 بوسم البداية ۲29 5أو86. 

* ينتهي عنصر ۲۲ بوسم النهاية 129 ۱0-. 

« کل ما يتم کتابته بين وسمي البداية و النهاية يدعى محتوی عنصر 111/1] علماً أن هناك 
بعض العناصر التي لا تحوي أي محتوی و التي تسمی عديمة المحتوی. 

* یندمج وسما البداية و النهاية في وسم واحد في حالة العناصر عديمة المحتوی. 

« يتم تمرير مجموعة من الخصاتص لأغلب عناصر ۳۱۲۷ في وسم البداية عن طریق 


الواصفات 66انبا۸]۲۱0. 


ملحوظة: دائماً و أبداًء قم بكتابة عناصر ۲/۲۱ بالأحرف الإنجليزيّة بحالتها الصغيرة 6۵56 10۷/6۲. 


لنشاهد الأمثلة التالية: 


<p> Welcome to my website. </p> 
<a href="index.htm"> Go to index </a> 
<hr /< 


دل كل سطر في الجدول السابق عنصراً من عناصر ا1۲۷ في الصفحة بشكل تخیْلي 


فالعنصر الأول يبدأ بالوسم <0> و ينتهي بالوسم <0/> و يحوي المحتوی النصي 10 ۷۷۵۱۵۵۳۲6 


|] 


۷۵016 ۲۱۷ بینما يبدأ العنصر الثاني بالوسم <۳06۰۳۸۲۳۲۳-]۳۲۵ 3> و ينتهي بالوسم <2/> 
و يحوي المحتوی النصي ۱006 10 20) مع إسناد القيمة ۱006.0۳ إلى واصفته ۰۱۲۵۲ في 
حين أنَّ العنصر الثالث عدیم المحتوی ینکون من اتحاد وسمي البداية و النهاية في وسم واحد 
بالشکل </ ۱۲ا>. 


الشكل العام لصفحات HTML‏ 
تتكون كل صفحة ۲۱۲۷ من ثلاث مناطق: 


©» منطقة جسد الصفحة 5661100 :Body‏ 
و هي المنطقة المحصورة بين وسمي <000۷> و <000۷/> و هذه المنطقة هي التي 
تنتج الشكل النهائي للصفحة و تضم جميع العناصر التي تمثّل المحتوى الظاهر للصفحة 
و الذي سيظهر في مستعرض الويب عند استعراض هذه الصفحة و بالطبع فإن الجزء 
الأكبر من عناصر ۲۱۲۷ سيكون في هذه المنطقة. 

و منطقة رأس الصفحة :Head Section‏ 
و هي المنطقة المحصورة بين وسمي <620> و <7630/> و هذه المنطقة تحوي 
مجموعة من عناصر ا11۷ أغلبها لا يظهر في مستعرض الويب عند استعراض 
الصفحة و لكن المهمة الرئيسية لهذه المنطقة هي إعطاء معلومات عن ماهيّة المحتوى 
الموجود بالصفحة إضافة لبعض المعلومات غير الظاهرة الأخرى و التي تستخدمها 
محركات البحث من أجل الأرشفة و البحث في الغالب. 

© المنطقة الم : 


' لم يرد هذا المصطلح في أي من المراجع التي قرأتها و اّما هو اجتهاد شخصي لتبسيط الفكرة المطروحة (برأيي). 


و هي المنطقة المحصورة بين وسمي <html>‏ و </html>‏ و هذه المنطقة هي المنطقة 


التي تحدد بداية و نهاية الصفحة و هي التي تضم منطقتي الرأس و الجسد و بهذا فهي 
تضم كامل مستند (صفحة) 1۲1 . 


و بهذا يكون الشكل العام لأي مستند ۲۱۲8 كمايلي: 
> 

<head> 

مجاتوى متطلقة الر ايس قير الطامر سيكوق متا 
</head>‏ 
<body>‏ 

محتوی الصفحة النهائي و الظاهر فعليا سیکون ما 
</body>‏ 


> ۳1 


واصفات الوسوم Attributes‏ 


يتلخّص کل ما قلناه سابقاً بأنَّ لغة ۲۱۲/۲ نتیح لك نقدیم المحتوی عبر انشاء مجموعة من 
العناصر » مهمة كل عنصر من عناصر !۲۱۲۸ عرض شيء محدد جداً في صفحتك فهناك 
عناصر لعرض النصوص و هناك عناصر لعرض الصور و هناك عناصر لعرض الروابط 
التشعبيّة ۱۱۳5 .۰ إلخ» يتم إنشاء کل عنصر من هذه العناصر بواسطة وسم خاص من وسوم 


۱ و يكون لكل عنصر وسم بداية و وسم نهاية بحصران محتوی العنصر الظاهر بینهما. 


یمکن تزويد بعض وسوم البداية بمجموعة من الخصائص الإضافيّة و التي تخصّص سلوك عرض 
التق لاد و ك هذا غود ما بف تال اغ ك 80182 لاخر الط تلفیتره ا عن نیال 
المثال : 


|] 


<p align="center"> 
المحتوی النصي لعنصر عرض النصوص‎ 
</B> 


كما تلاحظ فقد قمنا باضافة شيء جديد في هذه الشيفرة إلى وسم البداية الخاص بالعنصر م ألا و 


هو الواصفة 21190 التي تحدد محاذاة النص الذي سيعرضه العنصر م و أعطيناها القيمة 66016۲ 
لعرض النص في منتصف الصفحة و عند استعراضها سیظهر النص کمايلي: 


B® 5 [۱ 7 ”كك‎ 3 777۳7 


E 
ا‎ Th Favorites 0 68 SQL Injection and Cross-Si... 6 1000 Popular jQuery Plugi... 


5 << 
0 C\Users\Mukhtar\Documents\MY ... ۲ - مه‎ vi ۵ + عووم‎ Safety + Tools > 6 - 


المحتوى النصي لعنصر عرض النصوص 


Computer | Protected Mode: Off Cg vT RIS >‏ از ۱ 
الشكل ۳ : عنصر عرض النصوص <> عند إضافة واصفة المحاذاة "وناج 

حسناًء یوجد لكل وسم بداية من وسوم ۳۱۲۱۷ مجموعة معروفة سلفاً من الواصفات 65ادا ۸7 و 
يوجد لكل واصفة مجموعة معروفة سلفاً من القیم التي يمكن أن يتم إسنادها إلى الواصفة فالواصفة 
0 هي إحدى الواصفات المعروفة سلفاً لوسم البداية <0> على سبيل المثال و القيم التي يمكن 
أن تسند إليها هي |٠١‏ لمحاذاة النص إلى اليسار أو ۲1901 لمحاذاة النص إلى اليمين أو 0۵۳/6۲ 
لمحاذاة النص إلى الوسط. و سيتم بالطبع عرض واصفات كل وسم بالتفصيل عند الحديث عنه و 
أظن أنه لا داعي للقول أن الشكل العام للواصفة هو 2(06/"-73076" حيث أن 02716 هو اسم 
الواصفة و ۷۵۱6 هي القيمة المُستّدة لتلك الواصفة و التي يجب أن توضع بين علامتي اقتباس 


۳۹ 


مزدوجتین " " او علامتي اقتباس مفردتین * 


ملحوظة : يجب أن نتم كتابة وسوم و واصفات ا11۷ بحروف إنجليزيّة صغيرة 0256 10۷/6۲. 


أظن نا نستطیع الان أن نبدأ بالحدیث عن عناصر !۲/۲۸ كافة و بالتفصیل و البداية مع 
عناصر العناوین ۰۳۱6201095 و لکن قبل ذلك سنعرض جدولاً بمجموعة من الواصفات المشتركة 


بين أغلب وسوم ۳۱۲۸/۲ هنا بدلاً من تکرارها مع كل وسم من تلك الوسوم و فيمايلي الجدول: 


اسم الواصفة 
id‏ 


dir 


align 


class 


name 


القيم الممكنة 
اي اسم فرید(غیر مکرر) 
بالنسبة ل 0 


Itr 
rtl 


left 

right 

center 

justify 

أي اسم فئة 088 صالح 


الشرح 

يتم استخدام هذا الاسم للتعامل مع العنصر برمجيّاً 
باستخدام لغة 56/101 12۷2 أو jQueryز›‏ و لها 
استخدامات أخرى سيتم عرض أحدها في فقرة 
الروابط الداخلية لاحقاً 

لتحديد اتجاه القراءة» ۲اا تعني أن اتجاه القراءة من 
اليسار إلى اليمين أمّا ۲۲ فتعني أن اتجاه القراءة من 
اليمين إلى اليسار 

لتحدید محاذاة النضن 


لمنح کافة خصائص الفئة إلى العنصر و سیتم 
مناقشة هذا بالتفصیل في الفصل الخاص ب 53 
شام لد بور ات موی 


الجدول ۱ : جدول الواصفات المشتركة بين أغلب عناصر ۲۱۲۱۸۲ 


4 
o 


عناصر العناوین Headings‏ 


توفر لغة ۲۱۲0/۲ سنّة عناصر لعرض العناوین و هي على الترتیب: 1و 02 و 3 و 4 و 
5 و ۸6 حيث أنَّ العنصر 1 هو آکبرها حجماً و العنصر ۸6 هو الأصغر و ما بینهما يتدرج 
في الحجم» و طبعاً حرف ال 0 هنا اختصار لكلمة ۰۳۱۵2009 دعنا نجرب الشيفرة التالية على 
سبیل المثال: 
> 
<head>‏ 
E ME LOY‏ € 
صفحة اختبار لعناصر العناوين 
رح > 
</head>‏ 
edly ۱ ۲ rt‏ 
<1/>عنصر عنوان من المستوی الأوّل<1ط> 
<2/>عنصر عنوان من المستوی الثاني<22> 
<3/>عنصر عنوان من المستوی الثالث<23> 
<54/>عنصر عنوان من المستوی الرابع<4ط> 
<55/>عنصر عنو ان من المستوی الخامس<5ط> 
<26/>عنصر عنوان من المستوی السادس<6ط> 
</body>‏ 


> ۳1 2 


عند استعراض الصفحه السابقة في مستعرض الویب سنشاهد النتيجة التالیة: 


69 صفحة اختبار لعناصر العناوين‎ - Windows Internet EXPO ست كج‎ 
یب‎ Favorites 7 © [ SQL Injection and Cross-Si... @ | 1000 Popular jQuery Plugi... 


| © تسا + - ۳ صفحة اختبار لعناصر العناوین‎ n vw Page + Safety v Tools v © - 9 


عنصر عنوان من المستوى الأوّل 


عنصر عنوان من المستوى الثالث 


عنصر عنوان من المستوى الرايع 
عنصر عنوان من المستوى الخامس 


عنصر عنوان من المستوى السادس 


Computer | Protected Mode: Off 60 ( 4 12596 >‏ از 


الشکل ؛ : صفحة اختبار عناصر العناوین ۱1 إلى 56 
كما تلاحظ فقد قمنا بتزويد الوسم <body>‏ بالواصفة dir‏ و التي تحدد اتجاه قراءة جسد المستند و 
قمنا بإسناد القيمة ۲/۱ لها و ذلك لنجعل اتجاه القراءة من اليمين إلى اليسار ها 10 ۲191 و هو ما 
يتناسب مع اللغة العربية بالطبع» و في حال أن هذه الواصفة لم تُعْط أية قيمة فان القيمة 
الافتراضية لها هي |١‏ أي أن اتجاه القراءة الافتراضي من اليسار إلى اليمين. 
ملحوظة: استخدم عناصر العناوين <11> إلى <6> من أجل عناوين الفقرات فقط و لا تستخدمها لجعل النص 
عريضاً أو كبير الحجم فهناك وسوم خاصة لهذين الغرضين. 


4۹ 


عنصر الخط الاققي Horizontal Line‏ 


تقدّم لغة 1۲1 الوسم الخاص </ >۸١‏ لانشاء الخطوط الأفقيّة في الصفحة انظر للمثال التالي: 


<html> 


<head> 


ال Û‏ ع »> 


> / 612 |] 
€ 06 3615 


IOC Cll = VEEL 


الفقرة الأولى للتجربة فقط<م> 


GE OS 
<hr /> 
وى االققارة التانیبه للالاتجرية فتذلدق»‎ 9< 
<hr /< 
وى الفقرة الثالثة للتحربة فقط<>‎ 
</body> 
</html> 


تبدو الشيفرة السابقة في مستعرض الويب كمايلي: 


@ صفحة اختبار لعنصر الخط الأفقي‎ - Windows Internet Explorer 


$ Favorites چ‎ 8 | SQL Injection and Cross-Si... © | 1000 Popular jQuery Plugi... 


حسمت 4# ا و سس 01 
C\Users\Mukhtar\De: 1 + 4 ۱ + Google‏ 5 - 


88۱۰ » | © ..صفحة اختب‎ × ® - 8[ 3 899 + 2۵96 52۲60 Tools v 


محتوی الفقرة الأولى للتجرية فقط 


محنوی الفقرة التانية للتجربة فقط 


محنوی الفقرة الثالثة للتجربة فقط 


Done 


> 812596 | وا Computer | Protected Mode: Off‏ از 


الشكل ه : صفحة تجربة العنصر </ ۲> 


Comments التعلیقات‎ 


اعتاد المبرمجون في لغات البرمجة التقليديّة على كتابة آسطر توضيحيّة لا تعالج إذ آنها لا تعتبر 
جزءاً من الشیفرق و اّما تستخدم فقط لتذکیر المبرمج بأجزاء الشيفرة عندما یعود لتعدیلها بعد فترة 
من الزمن» و هذه الأسطر تعرف بالتعلیقات ۰0۳۱۳60۸5 و مع أنَّ ۲۱۲۸/۲ لغة وصفية كما 
قلت سابقاً الا آنها توفر آلية لكتابة التعلیقات ضمن المستندات. فنقدم الصيغة العامة التالية لكتابة 
التعلیق : 

د COMMON‏ == لا > 


لنشاهد المتال التالي على استخدام التعلیقات ضمن مستتد -۳۱[]۷: 


<html> 
<head> 


مه اسان اعنص. الط الافقيئ مضاقا اليا ها 1ع 
E aa ELE LOZ‏ من التعلبقات البرمجيّة 


</head> 
۱9/۵۵۱ GU E EE ا‎ 
>!-- السطرين التاليين للفقرة الأولى‎ --< 
اه <م/>محتوى الفقرة الأولى للتجربة فقط<م>‎ /< 
>!-- السطرين التاليين للفقرة الثانية‎ --< 
Oh الاتكورفة‎ ON all وکسنوی‎ ME ,/< 
>!-- السطر التالي للفقرة الثالثة‎ --< 
©» کنو نم رة ال ۸ لالت يروه هل و‎ 5 
</body> 


> ۳1 


۳ 


3 


تبدو الشيفرة السابقة كمايلي في مستعرض الویب مما یود أن التعلیقات لا تظهر في المستند( أثناء 


استعراض الصفحة جرّب اختیار الأمر "عرض-> المصدر " أو 50۲06<-۱۷16۷۷): 


© أمضافاً إليها مجمرعة من التعليقات البرمجية‎ 2 اe:///C:/sers/Mukhtarإ/Desktop/frstPage.html‎ - Original Source 


File Edit Format 
) ۳ C\Users\Mukh 
70 <html> 


صفقحة اختبار لعتصر الط <1+816+> نت ۵ چا Favorites‏ ۲[ 
الأققي مضاقاً إلي مجموعءة من التعلیقات الیرم چية ی 33 
8 ف ۲ × ..صفحة اختب © | » | - |88 
</head>‏ 
< “1ع 12۳-2 <body‏ 
<-- السطرين التاليين للفقرة الأولى --!> 
محتوى الققرة الأولى للتجرية <ع> 


محتوى الفقرة الأولى للتجربة فقط 


</>فقط 
<hr /<‏ 

السطرین التالیین للققرة --!> 
ی الفقرة الثائئة للتحردة فة 
الققرة الثانية للتجرية <«2> وى الفقرة الثانية للتجربة فقط 
<hr /<‏ 
التالي للققرة الثالثة --!> 
الققرة الثالثة للتجرية <«2> محتوى الفقرة الثالثة للتجربة فقط 
</>فقط 
</body>‏ 


الشكل ٠‏ : التعليقات تظهر باللون الأخضر في نافذة عرض المصدر و لا تظهر في الصفحة 


ملحوظة: لا تنس إشارة التعجب بعد القوس الأول في بداية وسم التعلیق. 


عناصر النصوص ۳۵۲۵۵0۲2۵0۲۱5 

نتکون صفحة الویب في الواقع من مجموعة من الفقرات النصية في الغالب يتم إنشاء هذه الفقرات 
باستخدام الوسم <0> و الذي مر معنا استخدامه في الأمثلة السابقة» و یستخدم الوسم </ 0۲> 
للنزول إلى السطر التالي و ذلك لأن محارف الفراغات بما فیها محرف المفتاح 216۲ لیس لها 
قيمة في لغة 1۲1 كما ذکرنا سابقا. 

عناصر تنسیق النصوص ۳۵۲۳۸۵۲۲۱۱9 ۲٥×٤‏ 


توفر لغة ۲۱۲۱ مجموعة من العناصر لتنسيق النصوصء فلجعل النص عريضاً 8010 توفر 
العنصر <0> (أو العنصر <۲009ا5>)» و لجعل النص مائلاً اقا توفر العنصر > (آو 


العنصر <6۲0>)» و لوضع خط آسفل النص توفر العنصر <ا> و لشطب النص 1061816 توفر 
العنصر <06۱>. لنشاهد الشيفرة التالية على سبیل المثال: 
> 
<head>‏ 
<ع1اt1/>صفحة‏ اختبار لعناصر تنسيق ال نصوص<11116> 
</head>‏ 
<body>‏ 
<p>‏ 
This is a sample text to demonstrate‏ 
<b>bold</b>,‏ 
<i>italic</i>,‏ 
<u>underline</u> and‏ 
<del>delete</del> tags.‏ 


<-- استخدم نا 0/5 للنزول سطر ١١‏ و ادا --!> 


<br/> 


You may use other tags to generate the same output: 
<br/> 
This is a sample text to demonstrate 
<strong>bold</strong>, 
<em>italic</em>, 
<u>underline</u> and 
<del>delete</del> tags. 
IB 


</body> 


اا 


</html> 


تبدو الشيفرة أعلاه في المستعرض كمايلي: 


@ صفحة اختبار لعناصر تنسیق النصوص‎ - Windows Internet Explorer 
دده ها انح , س و‎ 
(2 (رت)‎ 7 8 C\Users\Mukhtar\Desktı 1 + X ۱۱ Google 


ht Favorites چ‎ 8 | SQL Injection and Cross-Si... © 1000 Popular jQuery ۱۵. 
EO. | @ وم لعا + 3 ك ® ...صفحة اختبا‎ + ۳۵96 > Safety * Tools ۴ © - ع"‎ 


ھ 


This is a sample text to demonstrate bold, 2/۶ underline and tetete tags. 
You may use other tags to generate the same output: 


This is a sample text to demonstrate bold, /ta/ic, underline and tetete tags. 


Computer | Protected Mode: Off‏ از 


الشكل ۷ : صفحة اختبار عناصر تنسيق النصوص 
ملحوظة: بالطبع هناك المزید من عناصر تنسیق النصوص سیتم ذکرها في مرجع وسوم 17۷ في نهاية هذا 
الفصل. 


المحارف و الرموز الخاصّة Special Characters‏ 


هناك بعض المحارف و الرموز التي لا يمكن عرضها في الصفحة عن طریق کتابتها بشکل مباشر 
مثل الرموز المستخدمة في الریاضیات و محارف الفراغات و غیرهاء توفر لغة ۲۱۲0/۲ آلية خاصة 
لعرض هذه الرموز و ذلك باتباع الصيغة العامة التالية :6۷2۱6 باستبدل القيمة ۷۵۱6 بقيمة 
المحرف المطلوب أن يتم عرضه في مستعرض الویب و في الجدول التالي نماذج من هذه 
المحارف:؟ 


" للحصول على الجدول الکامل یمکن اتباع الرابط التالي: 
http://www.w3schools.com/tags/ref_symbols.asp‏ 


الرمز شيفرة XHTML‏ 


&lt; <‏ 
&gt; >‏ 
&ne; ۶‏ 
ا &trade;‏ 
© :6000۷ 
محرف الفراع &nbsp;‏ 
الجدول ۲ : بعض المحارف الخاصة في ۲۱۲۸/۲ 
لنشاهد المثال التالي: 
<html>‏ 
<head>‏ 
<title>‏ 
وفحة اخمتبارر لتق المتماررق. الخخاصة 
«قطلج 1ع > 
</head>‏ 
<body>‏ 
>€ 


3 817 5 AOC 10 897 2 2۳0 وله‎ 3 8686۵7 4 
all rights reserved for &copy; Mukhtar &trade; 


> 0< 


</body> 


> MELE 


۳۳ 


Windows 1۱۲6۲۱۶ Explorer‏ - صفحة اختبار للمحارف الخاصة و 


- م C\Users\Mukhtaı v | é+ | 2 ۱۱ 9 Google‏ ۳3 عت 


22 


gh Favorites ۳ a SQL Injection and Cross-Si... 0 1000 Popular JQuery ۱.۰ 


۲ 5 >> 
© صفحة اختبار للمحارف الخاصة‎ ۰ O 7i3 99 - Pager safety + Tools v 


3 < 5 and 10 > 2 and also 3 + 4 .... all rights reserved for © Mukhtar ™ 


Dc از‎ Computer | Protected Mode: Off eq > R125% 


الشكل ۸ : مثال لاستخدام بعض المحارف الخاصة في الصفحة 
عناصر الروابط Hyper Links‏ 


توفر لغة ۲ آلية للانتقال بين الصفحات المختلفة عبر عناصر الروابط ۱10۲6 ۰۳۱۷۵۵۲ و 
الروابط عبارة عن نصوص أو صور ننقلك عند النقر علیها من الصفحة الحالية إلى إلى صفحة 
ویب آخری» تقوم مستعرضات الویب بتمییز الروابط بعرض 'يد صغیرة" كمؤشر للفأرة عند الاشارة 
إلى أحد الروابط و يتم إنشاء الروابط بواسطة الوسم <2> و ال 2 هذه اختصار ل ۰۸۵۳0۳0۲ يتم 
تزوید عنصر الرابط بنص يُعرض کمحتوی له أمّا الموقع الهدف (الذي سیتم الانتقال إليه عند النقر 
على الرابط) فیتم تزویده للواصفة ۲۵۴" و التي هي اختصار ل ۳۵۲6۲6066 ۲۱۷۵6۲ فللنظر 
للمثال التالي: 

> 

<head> 
CIE ME e 


AE‏ لجناصر الر اعد 


> / 212152 


</head> 


<body> 


<a href="http: //www.microsoft. 2ط><3/>ما يكر وسوفت<'"010»‎ /> 

<a href="http: //www.google.com">Jجg+ج</a><br‎ /> 

<a href="http: //www.msn.com" target=" blank" >MSN</a> 

OE /< 

<a href="firstPage.html" target="_self">Jlثûn ول‎ >/2< 
</body> 


> ۲1 


الذي يبدو عند استعراضه بمستعرض الویب كمايلي: 


Windows 10۱6۲۱۶۱ ۲‏ - صفحة اختبار لعناصر الروابط @ 
ست تب ةلس . 


es 


33| Google 
e Favorites ۱ چ‎ )8 | SQL Injection and Cross-Si... 


6 - ® صفحة اختبار لعناصر الروابط @ 


مايكروسوفت 
جوجل 
MSN‏ | 


۲ ۳ 
ل مدال 


Computer | Protected Mode: Off‏ از 


الشكل ٩‏ : صفحة اختبار عنصر الروابط 
لقد قمنا بتزويد صفحتنا بمجموعة من عناصر الروابط التي تشير إلى بعض المواقع الشهيرة و قد 
تعمدت في الرابط الأخير ذكر اسم ملف المثال الأول الذي قمنا بإنشائه معاً في بداية هذا الفصل و 
ذلك لتوضيح أن الروابط يمكن أن تكون مطلقة 25501016 (كالثلاثة الأولى) أو نسبية ۴۵۱۵/۷6 


(کالرابط الأخير) و يقصد بالنسبية أن الرابط المذکور یکون عبارة عن مسار 2315 ملف الصفحة 
الهدف بالنسبة للصفحهة الحالية و في حالتنا فقد كانت الصفحة الهدف 11۳51۳296.۳170 في نفس 
مجلد الصفحة الحالية *. 


عند النقر على آحد هذه الروابط سیتم الانتقال إلى الرابط الا المذکور في الواصفة ۱۲۵۲ المرافقة 
لعنصر الرابط الذي تم النقر علیه» من الجدیر بالذکر أنَنا قمنا بتزوید بعض الروابط بالواصفة 
8 و التي تحدد مکان عرض الصفحة الهدف في المستعرض بمعنی أتها تجیب على الاسئلة 
التالية: 


هل سيتم عرض الصفحة الهدف في نفس الصفحة الحالية؟ (في هذه الحالة فإن قيمة الواصفة هي 
القيمة ا ©5_)» هل سيتم عرض الصفحة الهدف في نافذة مستعرض جديدة؟ ( في هذه الحالة فإن 
قيمة الواصفة 301اط_)» هل سيتم عرض الصفحة الهدف في إطار محدد؟ (في هذه الحالة فان 
قيمة الواصفة هي اسم الإطار و سيتم تناول الإطارات بشكل مفصّل لاحقاً). 


آخر ما يجب ذكره عن الروابط حالياً أنه يمكن للرابط أن يشير إلى أي مورد 1865010166 متوفر 
على الويب و ليس فقط الصفحاتء كما يمكن أن يشير الرابط إلى بريد إلكتروني |(دالا-ا و ذلك 
بأن نضع القيمة :7731140 قبل البريد الإلكتروني الذي نريد أن نضع رابطاً له» انظر المثال التالي: 
> 
<head>‏ 
CE E LEZ‏ 
روابط خاصة 


> 051 ENS 


' يمكنك تعلم المزيد عن المسارات ۳۵۸5 من خلال زيارة الموقع: 
http://msdn.microsoft.com/en-us /library/aa365247(VS.85).asPX‏ 


</head> 
<body> 


انقر هنا <a href="http: //www.somesite.com/files/f1ile1.zip'">‏ 
> ل وال الملف 


ح 52> 
>a/<ر‏ ا سلني< 60۳0۲ . 001۳۵11 32_55ط ۱0۵1 : 2221116" - <a href‏ 
</body>‏ 


</html> 


ما سيحدث عند النقر على الرابط الأول هو ظهور مربّع تحميل الملف 02109 ۳۱6 ٩2۷6‏ و ما 
سیحدث عند النقر على الملف الثاني هو ظهور برنامج مدير البرید الالكتروني (متل 0100 
5 )))) في وضع ارسال رسالة جديدة إلى البرید الالكتروني المذکور في الرابط. 


عناصر الصور ۱۱۱۵۵65 


توفر لغ ۲۱۲۱ عنصراً خاصاً لعرض الصور ضمن الصفحة هذا العنصر هو العنصر 
</۱۳9> (اختصاراً ل ۱۳0۵96) الذي يقوم بعرض الصورة ضمن الصفحة اعتماداً على مسارها 
الذي یمرر للعنصر عبر الواصفة 5/6 (اختصاراً ‏ ۰)80۷۲06 و كما هو الحال بالنسبة للعنصر 
الخاص </0۲> فإنّ العنصر </۱۳9> لا يمتلك أي وسم نهاية و لذلك فان شکله العام في الغالب 
یکون </ 5۲0-031۲ ۰۴1۲۳9 لنشاهد المتال التالي: 


> 
> 
<title>‏ 
صفحة لعرض عناصر الصور 
</title>‏ 


</head> 


<body> 
<img src="myPic. jpg" /> 


IMS SEC MEE الصورة الثانبة "210 لكام‎ " /< 


۷10۳-20۳ " الصورة الثالثة 21۳0-2۳ ۱۳۷/۳۲16۰00۳ حوطو <img‏ 
height="50px" /<‏ 


</ صو ری ات المسار الخاطلن اه "مسار حاط تن ا 
</body>‏ 


> 7/۳1 


Windows ۱۱۱۶۲۱۶۱ ۲‏ - صفحة لعرض عناصر الصور 


e C:\Documents and Settings\Mukhtar\Desktop11 ,html |‏ > اش 


>> ص 
dh - |} Page - Tools -‏ 21 صفحة لعرض عناصر الصور 8© | ي ل 


لک 
عورد د ابتار نی لعا 


computer 310090 >‏ ۱ 9 
الشکل ۱۰ : صفحة اختبار لعنصر الصور 

كما تلاحظ فقد قام عنصر عرض الصور بعرض الصور ذات المسارات المذکورة في کل وسم 

</۰>۲9 و من واصفات هذا العنصر الواصفة 21 التي تسند الیها قيمة نصيّة يتم عرضها في 

حال تعذر الوصول إلى الصورة المذکورة في الواصفة 5۲٥‏ و هذه الحالة حدثت معنا في الصورة 

الرابعة و التي زودناها بمسار خاطئ عن قصد لعرض هذه الحالة» كما یمکن عرض الصورة 


بمقاس محدد و ذلك عبر تزوید العنصر ۱۳9 بواصفتي الارتفاع 69 و العرض ۷۷۵/7 و التي 


تسند إليهما قیم رقميّة تحدد عرض و ارتفاع الصورة المعروضة بالبکسل(هذا ما تعنیه 0 في القیم 
المسندة لهانین الواصفتین). 

ملحوظة: على فرض أن صفحتنا تحتوي © صور فإنّ عرض الصفحة بشکل تام و صحیح سیحتاج لتحميل 5 
ملفات هي ملف الصفحة و ملفات الصور الخمسة و هذا ما قد يسبب حملا زائداً على موقعك مستقبلاً في حال 


الافراط في استخدام الصور . 
الصور بدلا من نصوص الروابط 


من الشائع في مواقم الویب أن يتم استبدال نصوص محتوی عناصر الروابط <۵> بالصور و ذلك 
لتجمیل محتوی الموقم بحیث يتم الانتقال للصفحة الهدف للرابط عند النقر على الصورة بدلاً من 


مثالاً بسيطاً لذلك: 
> 
0 > 
<title>‏ 
عرض صورة کمحتوی لرابط 
ELE LES‏ 
</head>‏ 
<body>‏ 
COZ‏ 1 1ك 3561567 Ga rer = ۳۳8۵1110 SMOKES‏ 
</ "راسلني"-21+8 <img src="myPic. jpg"‏ 
faz‏ 
</body>‏ 
</html>‏ 


5 
Windows Internet Explorer‏ - عرض صورة کمحتوی لرابط @ 


CX Users\ Mukhtar | 4 | 4 || 3 Google‏ ۳3 (رتا(س) 


Favorites 7 86 | SQL Injection and Cross-Si...‏ جد 


88 |” | » | © كا - له - ® × ...عرض صور‎ ۵ - Page> 


Computer | Protected Mode: Off‏ ار 


الشكل ۱۱ : استخدام الصور بدلاً عن النصوص كمحتوى للروابط 


الخرائط الصوريّة ۱۷۵06 ۱۳۸۵۵6 


الخرائط الصوريّة تعني جعل آجزاء محدّدة من صورة ما روابطاًء و يتم هذا على ثلاث مراحل؛ 
الأولى هي أن يتم وضع الصورة في الصفحة بشکل نقليدي عن طریق الوسم </۳09> أما الثانية 
فهي إنشاء عنصر الخریطة <1730> مع اسناد قيمة الواصفة 2۳16 الخاصة به كاسم للخريطة و 
من ثم (نشاء مجموعة من عناصر <۵۲6۵> باحدائیات المناطق التي سنتحول إلى روابط في 
الصورة» و المرحلة الثالثة نتم بربط عنصر الخريطة و عنصر الصورة و ذلك باسناد اسم الخريطة 
إلى الواصفة 567۳20 الخاصة بعنصر الصورة. لنشاهد المثال التالي: 

<html> 

<body> 


</>انقر على أحد الكواكب لعرض معلومات عنه<م> 


<img src="planets.gif" width="145" height="126" 
21 الكو اکب"-2‎ " usemap="#pمlanetmap"‎ /> 


<map name="planetmap"> 


<area shape="rect" coords="0,0,82,126" الشمس"212‎ " 
href="sun.htm" /> 


<area shape="circle" coords="90,58,3" "المريخ"-218‎ 
href="mercur.htm" /> 


03 


<area shape="circle" coords="124,58,8" alt=" "الزهرة‎ 
href="venus.htm" /> 


</map> 
</body> 


> ۲1 


يبدو المثال التالي في المستعرض كمايلي: 


4 CA\Users\Mukhtar\Desktop\firstPage.html - Windows Internet أ...ع‎ 


© > 5 1 CN Users\ Mukhtar ری ا‎ ۱ 2> || S| Google 


o Favorites هم چو‎ SQL Injection and Cross-Si... 


> عووم > وهم - ص x‏ يد 9 CX Users\Mukhtar\Deskto...‏ 4 


اتقر على أحد الكواكب لعرض معلومات عنه 


Computer | Protected Mode: Off‏ ار 


الشكل ۱۲ : مثال على صنع خريطة صورية 
كما تلاحظ فقد تمت إضافة الصورة بشكل طبيعي أولآء ثمَّ بدأنا بإنشاء الخريطة و أعيطناها اسماً 
بالسطر: 


mag Mame 01276 EMA > 


بعد ذلك قمنا بانشاء منطقة لكل کوکب من الکواکب عبر الوسم 2762 و الذي له واصفتان الأولى 
6 لتحدید شکل المنطقة (مستطیلة دائرية .. إلخ)» أمّا الثانية فهي واصفة الاحدائیات 
5 حیث تم نمریر آربعة إحداثيات في حالة المستطیل لتحدید آبعاد المستطیل يمثل 
الاحدائیان الأول و الثاني الرکن الأيسر العلوي من المستطیل بینما یمثل الاحدائیان الثالث و الرابع 
الرکن الأيمن السفلي من المستطیل و هذا كاف لتحدیده» و بالطبع تم هذا على اعتبار أن مركز 
الجملة الديكارتيّة للصورة هو الرکن الایسر 
العلوي من الصورة» و بهذا فان النقطة 
)٠.٠(‏ و النقطة (82,126) تحددان 
منطقة کوکب الشمس بالمستطیل المرسوم 
بينهماء أمّا في حالة المنطقة الدائرية فيتم 


تمرير ثلاثة إحداثيات يعبر الأول و الثاني 


عن نقطة مركز الدائرة و يعبر الثالث عن 


نصف قطرها. الشكل ۱۳ : شكل تخيلي لتوضيح المبدأ الهندسي في رسم المناطق 
و في النهاية قمنا بتمرير اسم الخريطة إلى الواصفة 567۳020 الخاصة بالصورة. 


ملحوظة: يتم تمرير اسم الخريطة إلى الواصفة 156۳020 مسبوقاً بالرمز # 


Internal Linking الروابط الداخليّة‎ 


أحياناً يكون المحتوى الموجود ضمن صفحة معيّنة كبيراً إلى حذ ما و في حالة مثل هذه يصبح 
الانتقال إلى فقرة محددة ضمن الصفحة عملية شتفرق بعض الجهد و الوقت. توش لغة ۱۱۲۸۸ 


آليّة للانتقال إلى جزء محدد من الصفحة مباشرة عبر ما يعرف بالروابط الداخلية Internal Links‏ 


و التي يتم تحقیقها عبر استخدام وسم الرابط <۵> و تمریر معرّف العنصر المراد الانتقال إليه 
كقيمة للواصفة ۱۳۵۲ بالشکل التالي: 
لاتقلل الي الستصر در ات خی لها اه و > 
حیث أنّ 10 يمثل معرف العنصر المراد الاننقال إليه ضمن الصفحة و المثال التالي یوضنح هذه 
الفکرة: 
> 
<head>‏ 
EEE‏ 
را على اترو ايبط الك اا 
LES‏ 21 > 
</head>‏ 
<body>‏ 
<2/>الی الفقرة انرlايبيةPara4">ö#"=href <a‏ 
مر و الولے 1 
3ا مجاتوى. الققفرة الأولي<و» 
1> الفترة انخافياة51» 
هنت مجتتوی الفقره الا ادو 
قرو ISAS NAN‏ 
جو ما ومحترى و الال ةدد 
<1/> الفقرة االلر اة ا ها ا 
0اا موی الشقارة انز ادو 
</body>‏ 


</html> 


5 ۱ 


القوائم 1.1515 
توفر لغة ۲۱۲۷ نوعین من عناصر القوائم: 


-١‏ القوائم غير المرتبة ]115 ۱00۲06۲60 عبر الوسم <الا>. 


۲- القوائم المرتبة ]۱6 0۲06۲60 عبر الوسم <01>. 


بعد أن نقوم بتحدید نوع القائمة التي نرغب بانشائها نضیف محتواها کمجموعة من عناصر <ا> و 


التي تعني ١16/7‏ 151اء لنشاهد المثال التالي و الذي بعرض كيفيّة إنشاء قائمة غير مرتبة بسيطة: 


> 
<head>‏ 
515132 /> ال قالى قانمة كير مرکا اع 
</head>‏ 
د AES E‏ 610/6۵۶ 


<ع/>سنتعلم و دك | الاد 


<ul> 
<li>HTML</1li> 
<li>HTML5</1i> 
<li>XHTML</1i> 
<l1li>CSS</1i> 
>11<0553>/13< 

</ul> 

</body> 
</html> 


۳ 


أ 
|| 


8 مثال على قائمة غير مرتبة‎ - Windows 1۳۱۵۲۱۳۵۲ Explorer 
ك‎ 52-227 5 


5616۳ ات‎ >| “| X || 4 Googie 2 
2> 


hk 27 ۱ 0 6 SQL Injection and Cross-Si... 
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الشكل ۱۶ : مثال لقائمة غير مرتبة بسيطة 


بتغبیر وسمي البداية و النهاية لعنصر القائمة من <ul>‏ و </ul>‏ إلى <|0> و </ol>‏ ستصبح 
القائمة مرتبة بالشکل التالي: 


1 Favorites ۱ يد‎ 6 SQL Injection and Cross-Si... 
| © مثال على قائمة غير مرتبة‎ 5 A - <3 dh + Page> 


Computer | Protected Mode: Off ¢ - © 12596 >‏ از 


الشكل ١5‏ : مثال على قائمة مرتبة بسيطة 


بالطبع و كما ذکرت منذ بداية هذا الفصل فاٍن أي عنصر من عناصر ۲۱۲ يمكن أن يحوي 
بين وسمي بدایته و نهایته أية مجموعة آخری من العناصر و هذا يعني أننا نستطیع إنشاء قائمة 
تحوي قوائم فرعيّة كعناصر لهاء و المثال التالي يوضح هذه الفکرة: 

GIME 

<head> 

مه ال علے قائمة مع و عاد 
</head>‏ 
E‏ ع CL‏ مرول 


<0/ >سنتعلم و مك | الک ادد 


> 
IS‏ 
HTML‏ 
<ul>‏ 
<ذ1/>الرو ابط<ذا1> 
<13/>الصور<11> 
القوائم<11> 
<111> 
<11/>المرتبة<11> 
<11/>غير المرتبة<11> 
</ul>‏ 
<13/> 
</ul>‏ 
ER‏ 


>11<]۳۲۲۲, BS CAS 


1111:2713 الک 


12 1 ۸ > 1-5655 از > 


اک وراد > 
GIONS‏ 
۵۷ > 


> ۳۲1 


يبدو المثال أعلاه في المستعرض کمايلي: 


@ مثال على قائمة معقدة‎ - Windows 1۳16۲۱۵۶ Explorer 


nm. Mm 
SE 68 C\Users\Mukhtar\Deskto| > | «+ ۳4 | | $| Google 


qh Favorites 5 8 | SQL Injection and Cross-Si... 6 | 1000 Popular jQuery Plugi... 


Safety v ۴ © - 4‏ + عووم + وهم لعا - 5 v‏ ® مثال على قائمة معقدة © 


سنتعلم في هذا الكتاب 


HTML .1‏ 
ه الزوایط 
ه الصور 
ه القوائم 
» المرتبة 
» غير المرتبة 
HTML 5 .‏ 
XHTML .‏ 
CSS .‏ 
۰ 9553 


Computer | Protected Mode: Off e > ۶ 6‏ از 


الشکل ۱5 : مثال على قائمة معقدة 
آخر ما يجب ذكره عن القوائم أنه يمكن استخدام الواصفة 1۷06 لتغيير شکل القائمة ففي حالة 
القوائم غير المرتبة یمکن إسناد إحدى القیم التالية إليها: 50276 أو 0156 أو 01۳0۱6 لوضع رمز 
المربع أو القرص أو الداثرة آمام کل عنصر على الترتیب و في حالة القائمة المرتبة يمكن اسناد 


إحدى القیم ۱ أو ۸ أو 2 أو | أو أ¡ إلى الواصفة ۷06 لتحویل الترقیم إلى ترقیم بأرقام عربيةء ترقیم 
بأحرف إنجليزية كبيرة» ترقیم بأحرف انجليزية صغيرة» ترقیم بأرقام لاتينية كبيرة» ترقیم بأرقام لاتينية 
صغيرة على الترتیب. 


یوجد نوع خاص من القوائم یعرف بقوائم المصطلحات يتم إنشاؤه باستخدام الوسم <01> لعنصر 
القائمة و الوسم <4> لعنصر المصطلح و الوسم <00> لعنصر تعریف المصطلح, لنشاهد المثال 
التالي: 
<html>‏ 
<head>‏ 
K5‏ تال هلي قانمة موطاعا ات 
</head>‏ 


رب E‏ عط كه ۱9/6۵ 


<dl> 
<dt>HTML</dt> 
<dd>Hyper Text Markup Language</dd> 
<dt>XHTML</dt> 
<dd>eXtensible Hyper Text Markup Language</dd> 
<dt>CSS</dt> 
<dd>Cascading Style Sheet</dd> 

</d1> 

BOS 
MELE 


@ مثال على قائمة مصطلحات‎ - Windows Internet Explorer 5 
©] CAUsers\Mukhtaı 1 2 ۱ 4 ۱ 33 Google 
qf Favorites ١ جر‎ @] SQL Injection and Cross-Si... @] 1000 Popular jQuery Plugi... 


© مثال على قائمة مصطحات‎ ® <O + كا‎ 98969 + Pager safety v 


HTML 
Hyper Text Markup Language 
XHTML 


eXtensible Hyper Text Markup Language 
CSS 


Cascading Style Sheet 


> 12596 © ج Computer | Protected Mode: Off eq‏ از 


الشكل ۱۷ : هكذا تبدو قائمة المصطلحات في المستعرض 
الجداول 132165 


توفر لغة ۲۱۲ آلية لإنشاء الجداول عبر العنصر <2019ا> و يتم ذلك عبر إنشاء العنصر 
<3016]> أُوْلآَ و تمرير واصفتي العرض ۱۷10/0 و عرض الحدود 00۳06۲ بالبكسل» و من ثم 
إنشاء محتويات الجدول عبر عنصر أسطر الجدول 701/5 ©1901 و الذي يتم تحقيقه باستخدام 
الوسم </1>». ثم يتم ذكر محتويات خلايا 0212 12016 كل سطر من أسطر الجدول على حدى و 
ذلك عبر الوسم <10> و لتسهيل حفظ الوسوم يمكن تمثيلها بشكل مرئي كمايلي: 


<td></td> <td></td> <td></td> 


<td></td> <td></td> <td></td> 


<td></td> <td></td> <td></td> 


الشكل ۱۸ : شكل تخيلي لتوضيح الوسوم المستعلمة لإنشاء الجدول 


و لتطبيق هذا المفهوم عملياً بغية توضيحه أكثر دعنا نشاهد الشيفرة التالية التي تقوم بإنشاء جدول 


بسیط: 


الت ادج روت تا نل 


خی 


انشا ء 


width="50%"> 


d<‏ /> اسم 


<0+/>برمجة 


<0+/>برمجة 


> 
<head> 
» 61 جدول وط عا ع‎ 
</head> 
<body dir="rtl"> 


<table border="1" 


</>برمجة الألعاي<0غ+> 


<tr> 
الکتایب<۳0>‎ 
> السعرحقع‎ >/-< 
</tr> 
SEES 
الویب<۳0>‎ 
> ع0<١ ه‎ > 
</tr> 
<tr> 
الجو ال<۲0>‎ 
>0< ۰۰ > 
</tr> 
<tr> 
<td>Yo۰</td> 
</tr> 
<tr> 


<۵+/>تعلم 


الطبخ<۲0> 


<td>o*</td> 


</tr> 
</table> 
</body> 


> 
يبدو هذا الجدول عند عرضه في مستعرض الویب کمايلي: 
Windows 1۳16۲۳6۱ Explorer ۱"‏ - مثال على انشاء جدول بسبط @ ۱ 


YÎ Google‏ || 2 | جه |< 6 042 کے 
GEE ۱۲23|‏ 


۷ Favorites | Şş @] SQL Injection and Cross-Si.. @] 1000 Popular jQuery Plugi... 
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اسم الكتاب 
برمجة الويب 
برمجة الجوال 
برمجة الألعاب 


تعلم الطبخ 


Computer | Protected Mode: Off eq ( © 125996 >‏ از 


الشکل ۱٩‏ : مثال على إنشاء جدول بسيط 

كما رأينا فقد قمنا أولاً بانشاء عنصر الجدول <1۵016> بعرض 1/1019 705۰ من العرض الكلي 
للصفحة (حاول تغيير حجم نافذة المستعرض لتلاحظ أن ذلك يبقى صحيحاً!)»و بعرض حدود 
١ ۲‏ بكسلء ثمَّ قمنا بانشاء سطر جدید باستخدام الوسمین <۰>]۲<>/۲ يحوي هذا السطر 
على خلیتین <10<>/10> تحوي الأولى القيمة "اسم الکتاب" و تحوي الثانية القيمة السعر" نم قمذ 
بتکرار نفس الأسلوب مع الأسطر الأخرى التي تحوي بیانات الکتب» آظن أن الموضوع أصبح 
واطيها الان 

ملحوظة: يمكن إعطاء قيمة عرض الجدول بالبكسل أيضاً أو بأي واحدة قياس من الواحدات المدعومة في لغة 
۱و التي سيتم ذكرها لاحقاً. 


یقسم كل جدول من جداول ۲۱۲۸ إلى أربع مناطق: 


۱- منطقة رأس الجدول ۳۱620 ۲2016: يُنشأ هذا القسم باستخدام الوسمین <10620> و 
<10620/> و يحوي في الغالب على عنصر سطر <۲<>/۲> يحوي بين وسمي بدایته و 
نهايته عناوین أعمدة الجدول في خلایا من النوع >١<‏ بدلاً من <40>» حیث تم 
الاصطلاح أن <10> تعني خلية بیانات 0212 120۱6 في حين أن <10> تعني خلية 
عنوان heading‏ ۰12016 

۲- منطقة جسم الجدول 500 ۲2016: يُنشأ هذا القسم باستخدام الوسمین <1000> و 
</ا1500/> و يحوي على سطور البیانات و التي تنشأ باستخدام <> و بما أن خلاياها 
تحوي معلومات فاٍن الخلایا تنشأ باستخدام الوسوم <10>. 

۳- منطقة ذيل الجدول ۳00۶ ۲2016: يُنشأ هذا القسم باستخدام الوسمین <1/001> و 
<۱3001/> و يحوي في الغالب على عنصر سطر <۲<>/)۲|> يحوي بين وسمي بدایته و 
نهایته ملخصات عن أعمدة الجدول في خلایا من النوع <58]>. 

5- عنوان الجدول 3011007): يضاف عنوان الجدول بکتابة نص العنوان بين وسمي 


<ionاcap>‏ و <6۵۳۷00/> يوضّح الشکل التالي مناطق الجدول المختلفة: 


فاتورة شراء الكتب ج عنوان الجدول 


اسم الكتاب السعر ج رأس الجدول 


الشكل ٠‏ : رسم توضيحي لأقسام الجدول في ۲۱۲۲۷۱ 


لتحقیق الجدول المذکور في صفحتنا سنکتب شیفرة ۲۱۲۱ التالية: 


> 
<head>‏ 
E‏ ال علے ار جدول. فخال<5215153> 
</head>‏ 
EE LAS‏ 1 اداق 1۵۵۵ 


<table border="1" width="50%"> 


>caption/<فاتورةö‏ شراء اiãÉlب>caption<‏ 


<thead> 
<tr> 
>tط<باتكلا حطغ/>اسم‎ 
>tط<رعسلا‎ >/ 
</tr> 
</ thead> 
<tbody> 
EE 
<0+/>برمجة الويب<0>‎ 
<td>150</td> 
KEES 
JE 1E 


م۱ کرم الجن ال 0ع 


or 


<td>200</td> 


E 
IEE 
<0+/>برمجة الألعاب<20>‎ 
ECS ISOS حامق‎ 
CIEE 
EI 
>اtd<خيطلا <0+/>تعلم‎ 
ECL SOS AEC 
EES 
</tbody> 
<tfoot> 
<tr> 
<th>عومجملا‎ >/ t< 
<th>750</th> 
</tr> 
</tfoot> 
</table> 
</body> 
</html> 


دو هذه ال 8 في مستعرض الویب كمايلي : 


o4 


لعاإ ع Windows 1016۲۱6۶ Explorer‏ - مثال على انشاء جدول مثالي @ 
Google‏ أ ۱ ۳4 1 4 3 0٩۱۵۵‏ 2200 


1 Favorites 1 68 | SQL Injection and Cross-Si... 8 | 1000 Popular jQuery Plugi... 


>> 
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فاتورة شراء الكتب 


اسم الكتاب 


Computer | Protected Mode: Off e - © 12596 >‏ از 


الشكل ۲۱ : مثال لإنشاء جدول ۲۸۲۱/1 مثالي 


كما تلاحظ فإنّ العنوان يظهر أعلى الجدولء كما أن الأسطر الموجودة في منطقتي الرأس و الذيل 
تظهر بخط عريض 5010. 


الجداول غير البسيطة 


في الحقيقة ما تم استعراضه في الفقرة الماضية كان جميلاً و بسيطاً أيضاً فبالنسبة لحالة مثل حالة 
فاتورة الشراء فإن جدولاً بعمودين و بمجموعة من الأسطر أمر بسيط و لكن ماذا عن الحالات 
الأعقد؟ء ماذا عن الحالات التي لا تكون فيها الخلايا متساوية الأحجام؟» و لا الأسطر متساوية 
عدد الخلايا؟» تجيب ۲۱۲۱ على هذه التساؤلات المحقّة عبر تقديم الواصفتين 1011/5081 و 


.colspan 


تستخدم الواصفتان ۲0۷/5020 و 0015020 مع وسم بداية الخلية <10> أو <40> و تسند إليهما 
قيمة رقمية صحيحة (۱ أو ۲ أو ۳ .. إلخ) تغير من حجم الخلية فتجعلها بحجم خليتين أو ثلاث 


أو أربع .. إلخ» حيث أن ۲0۷502۳0 تتحكم بعرض الخلية» أما 00۱5020 فتتحكم بارتفاع الخلية. 


لنشاهد الشيفرة التالية على سبيل المثال: 


<html> 
MEAG 
> ا ال علی انشا جدول قير بسیط<ه1‎ 
</head> 
DOSY 0112-211 
<table border="1" width="100%"> 
<tbody> 
GEEZ 
اسع اکا‎ E 
EEE كهالم‎ 3361217 LANES 175 EOS 
<td rowspan="3'"> 
<img src="jQueryl20.png"> 
€ EOE 
JEEZ 
E EZ 
المؤلف<80>‎ >/0< 
ار لكك واا لے‎ 0 
> تا‎ 
>] 
Ey داوق ی را‎ 
<td>2010</td> 
AEE 
EZ 


<td colspan="3"> 


بتكم ملد !| الکتا مملوسات عن مكافيبة 021۶[ 


كه 


بشکل مبسط و و اضح ات و ون الهم 


</td> 
> EES 
</tbody> 
</table> 
€ 7 
</html> 


تبدو الشيفرة السابقة عند عرضها في المستعرض كمايلي: 


= 
یه 


۱ Favorites چ‎ 6 SQL Injection and 017055-51... ê 1000 Popular jQuery Plugi... منظمة كناب بلا حدود الشرق الاوسط‎ 


2 5 
vl Hm + ۳296 Safety > Tools * 69 - 1‏ له ® مثال على انشاء جدول غير بسيط 8 


۳ 


تعلم رمز في 120 دقيقة 


في 120 دقيقة 


مختار سید صالسح 


سنه الإصدار 


يقدم هذا الكتاب معلومات عن مكتبة jQuery‏ بشکل مبسط و واضح 16 إلخ. 


v 12916 >‏ و۶ Computer | Protected Mode: Off‏ از 


الشکل ۲۲ : مثال على إنشاء جدول غير بسيط باستخدام الواصفتین ۲۵۷۷50۵۲ و 6015030 


كما تری فاٍن الجدول يتكون من آربعة سطور يحوي السطر الأول على ثلاث خلایا واحدة منها 
بارتفا ع یعادل ارتفاع ثلاثة أسطر مجتمعة (هذا ما تعنیه 3"-701/50310")» أمّا السطر الأخير من 


الجدول فيحوي على خلية واحدة بعرض أعمدة الجدول الثلائة مجتمعة (و هذا ما تعنیه 


۰60۱5020-3 أظن أن استخدام الواصفتین ۲۵۷/5020 و 0015020 أصبح واضحاً الآن» و 
بالنسبة لأصدقائي الذين لم تتضح الصورة بالنسبة لهم فأعتذر منهم و أنصحهم أن یقوموا بتغییر 
القيم المذكورة في الواصفنین ۲0۷۷5۵2۵0 و 0015031 في المتال السابق و يلاحظوا الفرق الحاصل 
في أحجام الخلایا فهذا یساعد كثيراً في تشکیل تصوّر أفضل لدیهم كما آظن. 


ملحوظة: لیطمئن قلبي أحب أن آذکرك أنه بإمكانك وضع أي من عناصر ا11 کمحتوی في خلایا الجدول. 
النماذج ۴0۵۲۳5 


تستخدم النمادج ۳0۲۳5 في لغة ۲۱۲۷1 لاستقبال المدخلات ۱0016 من المستخدم بغية عرضها 
أو تخزینها أو القيام بعملیات معالجة معينة عليهاء يتم إنشاء النماذج باستخدام الوسمین <0۲۲7]> 
و <1017/> الذان سیحویان بینهما مجموعة من عناصر الادخال <ادا10۵> مثل مربعات 
النصوص 00۷685 167 و عناصر الاختيار 065 6۳0660 و الأزرار 5 و القوائم 


المنسدلة 15]15! 96۱601.. إلخ. 


يتم تزويد وسم بداية عنصر النموذج <0۳۳0]> بواصفتین آساسیتین الأولى هي الواصفة 26100 و 
التي تحدد اسم الملف البرمجي الذي سیقوم بمعالجة البیانات المدخلة في النموذج و یکون الملف 
البرمجي مکتوباً بإحدى لغات البرمجة من طرف السیرفر 510 56۳۷۵۲ مثل ۳۲ أو 
۲ ۸6۲ أو J5۶‏ أو .. إلخ (و البرمجة من طرف السیرفر موضوع خارج نطاق هذا الکتاب)» 
مّا الواصفة الثانية فهي الواصفة ۲06/000 و التي تحدد طريقة إرسال البیانات إلى الملف البرمجي 


المذکور سابقاً باحدی طریقتین: 


١‏ - الطريقة الأولى هي الطريقة 964 حيث يتم إرسال البیانات في شريط العنوان في 
المستعرض بعد اسم الملف البرمجي بشكل آزواج مفتاح/قيمة» انظر للرابط التالي على 
سبيل المثال: 


http://www.site.com /file.php?name=Mukhtar&age=238&job=ComputerEngin 


eer 
http://www .site.com/file.0ص كما تلاحظ فإن الملف البرمجي في هذه الحالة هو‎ 
أمّا القيم المرسلة فهي:‎ 
job = ComputerEngineer و‎ age = 23 و‎ name = Mukhtar 
الطريقة الثانية هي الطريقة 0051 حيث يتم إرسال البيانات بشكل غير ظاهر في‎ - ۲ 
.)۲۱۲ ۲۳ شريط العنوان (في الحقيقة يتم إرسالها مع ترويسة طلب‎ 

بما أننا -في هذا الكتاب- سنهتم بكيفية إنشاء النماذج فقط و لن نناقش كيفية معالجة الطلبات 

فبإمكانك الآن تجاهل ما تم ذكره عن الواصفة 77611700 و التركيز على كيفية بناء النماذج. 

نهایته باستخدام الوسم <ألامص٣أ>‏ و طبعاً سيتم تزويد كل عنصر إدخال باسم فريد يُستد كقيمة 


الال پوضنح القیم الك و ما يمقله کل منها: 


القيمة ما تمثله 

button‏ زر أوامر 

checkbox‏ عنصر اختیار متعدد 

file‏ مربع لاختيار ملف بغية رفعه إلى الموقع 
hidden‏ عنصر إدخال مخفي 

password‏ عنصر إدخال كلمة المرور 

radio‏ عنصر اختیار فردي 

reset‏ زر لاعادة ضبط القيم الافتراضية لعناصر 


۱ 


الادخال كاملة في النموذج 
submit‏ زر موافق (ارسال الطلب) 


text‏ مربع إدخال نص 
الجدول ۳ : القيم المختلفة للواصفة ١٠لا‏ الخاصة بعنصر <ادام1۳> 


لا تقلق إِنْ بدت لك المعلومات كثيرة و معقدة و تاب الشيفرة التالية: 
۱ و و تابع معي 


<html> 
MEAG 
<title> 
مثال على انشاء نموذج بسیط‎ 
>/۱1 116 
</head> 
GOOSEN للع ۲۶ ع كله‎ 
<form method="get" action="file.php"> 
الاسم‎ 
<input type="text" name="nameText" id="nameText" /< 
<br/> 
كلمة المرور‎ 
<input type="password" name="pass" id="pass" /> 
<br/> 


<input type="submit" name="okButton" id="okButton" 
۷21162۷ "مو افق‎ /< 


</ form> 
</body> 


</html> 


و التي تبدو عند عرضها في مستعرض الویب و بعد (دخال بعض البیانات كمايلي: 


@ مثال على انشاء نموذح بسيط‎ - Windows 1۳۱۲6۲۲۱۱۶۲ Explorer 


۳ 2 ۱ جه 3 CX Users\Mukhtaı‏ 5 هات 


3 Google 
$ Favorites چ‎ 6 | SQL Injection and Cross-Si... 


- ل - هه مثال على إنشاء نموذج بسيط © 


ھ4 


الاسم : مختار سيد صالح 
كلمة المرور : و و و و 


Computer | Protected Mode: Off‏ ار 


> 12596 © |- و۲ 


الشكل ۲۳ : مثال على إنشاء نموذج بسيط 
حسناً الموضوع بسيط كما رأيت» دعنا نقوم بتطوير نموذجنا هذا ليشمل مجموعة أخرى من عناصر 


الادخال علی سييل التجرية» انظر للشيفرة التالية: 


<html> 


<head> 


<1 »تال على انشاء نموذج آعقد قلیلا<ه۲1۲1> 
</head>‏ 


>900۷7 0122-211 


<form ۳6۵1۳002۷۲061۲ action="file.php"> 


سای وه <SINOUE ۱۵۵۵ EEE" ROMO‏ الاسم و 
id="nameText" />‏ 
OES‏ 
Mame Dac‏ ۱3۹3۵۳0 را الا 1۱۵ کلم ال مر زر 
id="pass" />‏ 
OES‏ 


: الصورة الشخصبة‎ >] ۳۳۵2۲۶116۳ Mame PCL 


تلان اده ام اد 
BES‏ 


<input type="reset" name="resBtn" id="resBtn" 
value=" استعاد ة‎ ۲ /< 


<input type="submit" name="okButton" id="okButton" 
721162" "مو افق‎ /< 


ةق > 
۵۷ > 


</html> 
تبدو الشيفرة السابقة في مستعرض الويب كمايلي:‎ 


Windows 1016۲۳۱۰ Explorer‏ - مثال على إنشاء نموذج أعقد قلیلاً 
2 ۳ 5 جم - 
X ۱۱ ۰ Google‏ | ج» | E 681 C\Users\Mukhtaı v‏ 

> ۳ = سح : 


4 Favorites 1 © SQL Injection and Cross-Si... 8 1000 Popular jQuery ۱۰۰۰ 


© +عودم + 899 تا [6] - ® مثال على إنشاء نموذج عفد قليلاً‎ safety 


Computer | Protected Mode: Off‏ از 


الشكل ۲٤‏ : إنشاء نموذج أعقد بقليل 
مهلاً! .. و لكن ماذا عن عناصر الاختیار radio‏ و checkbox‏ ؟ 
حسناًء في الواقع يتم استعمال هذه العناصر في النماذج بغية تمكين المستخدم من الاجابة على 
سوال محدد و ذلك باختيار جواب واحد فقط من عدة إجابات محتملة (في حالة عنصر ۲20:0) أو 


الاجابة على سوال محدد باختیار آکثر من جواب (في حالة عنصر *0066۷00) و يتم استخدام 


هذه العنا بنفس الطريقة السابقة ظة اعطاء جميع العنا التى تمنل اجابة اه 
صر مع جميع العتاصن. الدى 
السؤال القيمة ذاتها للواصفة ©5317 و قيماً مختلفة للواصفة ۰۷۵۱6 لنشاهد المثال التالي: 


<html> 
MEAG 
GELELS> ۰ 4 ۱ © anl تال فالى‎ > 81513 
</head> 
ISOEN 1ك‎ 
<form method="post" action="file.php"> 
ور‎ E E ای لت‎ 002 
جريدة‎ 
<input type="checkbox" name="wrKnow" value="nPaper" /> 
موقع إلكتروني‎ 
<input type="checkbox" name="wrKnow" value="wbSite" /> 
صدیق‎ 
<input type="checkbox" name="wrKnow" value="frnd" /< 
محرك بحث‎ 
<input type="checkbox" name="wrKnow" value="srEng" /> 
E EE CEE ETE 
حفن‎ 


<input type="radio" name="rate" value="good" /> 


متوسط 


<input type="radio" name="rate" value="mid" /> 


سي ۶ 


<input type="radio" name="rate" value="bad" /< 


1 


> FORE 
</body> 


> ۳۲1 


EB CAUsers\Mukhtar > | 4+ | <>‏ فت لس 


5 اك 
SQL Injection and Cross-Si...‏ | 8۱ چو Favorites‏ جه 
]> 6 3 ® ...مثال على checkboX|‏ و radio‏ 4 
من أين علمت عن موقعنا ؟ 
جريدة [/] موقع الكتروني ]| صديق [/] محرك بحث | ۲ 
ما تقييمك لموقعنا؟ 


Computer | Protected Mode: Off Cg > 84 125956 vw‏ از 
الشکل ۲۵ : متال على استخدام checkbox‏ و radio‏ 


هناك طريقة آخری لتحقیق شيء مشابه لعنصر ۲2010 من حيث الهدف و لکنه یستخدم في حال 
وجود بدائل کثيرة (آجوبة کثيرة محتملة للسوال) و هو عنصر القائمة المنسدلة و يتم تحقيقه عبر 
الوسم <96۱601> أمّا عناصر القائمة فیتم تحقیقها من خلال الوسم <001100> و يتم تحدید أحد 
هذه العناصر کخیار افتراضي عن طریق تمرير الواصفة "56۱60160-5660160 في وسم بدايته» 
لنشاهد المتال التالي: 

> 


<head> 


13 ال علي ات لم E1 E1L82Sê18CE‏ 
Reads‏ 


ال Et‏ لك تاقوا 


<form method="post" action="file.php"> 
ومن أق اليلد ان اة ؟<و»>‎ 
<select name="nationality'"> 
<option selected="selected"> Ly ر‎ gw</option> 
<option>J!l العر‎ >/ 00۲1۵ 
<option>jliıJ</option> 
<option>jaط¦bwJi</option>‎ 
<option>jüaرÎl1l</option>‎ 
<option>ڊرزغخnlJاl</option>‎ 
<option>رڇÖئاl الجز‎ >/ 09۵۵ 
</select> 
EO 
> ۵۷ 


> 1 


ر د 


Th Favorites چو‎ €) SQL Injection and Cross-Si... 


- 60 هم | مثال على استخدام ©5616 6 


Computer | Protected Mode: ۴‏ تقار 


الشکل ۲۰ : متال على استخدام عنصر 561606 


بقي عنصر ادخال آخیر لمناقشته هنا و هو العنصر <612۲68]> و الذي یستخدم لادخال قيمة 
نصية متعددة الأسطر على عکس العنصر <ادام0[> من النوع 16 و الذي يستخدم لادخال قيمة 


EE‏ ]ها 


یمرر للعنصر <16<13063> قيم عددية صحيحة عبر الواصفتین 6015 و ۲0۷۷5 لتحدید عرضه و 
ارتفاعه انظر الشيفرة التالية: 
<html>‏ 
<head>‏ 
<title>‏ 
تال على اوا ام ۵ ۶ 
ARE 82‏ 
</head>‏ 
رب ISOC Clie WEE‏ 
<form method="post" action="file.php">‏ 


82 /> كاتنت ل رق اكد > 


<textarea cols="30" rows="10" name="bio"> 


</textarea> 


€ ۶ OEE 
</body> 


> ۳۲1 


الذی يبدو عند استعراضه ة تعرض الویب عمایلی: 
و الدي يبدو ستعراصة في مسعرص 1 


5 


SQL Injection and Cross-Si...‏ [ © چو Favorites‏ د 


ص can‏ لقعا > ۳3 m~‏ مثال علی استخدام textarea‏ @ | 


الشكل ۲۷ : مثال على استخدام الخصر 1612۲62 
تقسیم عناصر الإدخال إلى مجموعات 


يمكن تقسيم عناصر الإدخال في النماذج الكبيرة إلى أقسام منطقية يوضع كل منها في إطار 
مستقل و هذا ما توفره لغة ۲۱۲ باستخدام الوسمين <1610561> و <1ع116105/> اللذان 
سيحويان بينهما مجموعة عناصر الإدخال و يتم تزويد كل مجموعة بعنوان توضيحي عبر الوسم 
<189800>: كما يمكن منح كل عنصر من عناصر الادخال عنواناً يدل على ماهيّة المعلومات 
المدخلة فيه عن طريق الوسم <ا1306> بتمرير اسم عنصر الإدخال إلى واصفة 107 الخاصة 
بعنصر العنوان <۱2061> دعنا نشاهد المثال التالي: 


> 
<head>‏ 
<title>‏ 
کال علے اساتتعد الم ۴۱096 
قالع 51 / > 


Mead 


<body dir="rtl"> 


<form method="get" action=""> 


<fieldset> 
><1egend><ةيصخشلا‎ تانايبلا>/1egend<‎ 
<label for="nameTXT"> لاسم‎ |</label> 


<input type="text" name="nameTXT" id="nameTXT" 


maxlength="50" /> 


<br/><br/> 
<label ۶02۲ 296121 العمر<"‎ >/13561< 


<input type="text" 871622961201۳" 1 حل‎ ۳ 


maxlength="2" /> 


>/ fieldset> 


OE > 


<fieldset> 
ات3 العمل<9600ع1>‎ راgم</1egend>‎ 
04 
<input type="checkbox" name="prog" value="cs"/> 


ESE 


<input type="checkbox" name="prog" value="vb"/> 


<input type="checkbox" name="prog" value="fs"/> 


GE E 


<input type="checkbox" name="prog" value="cpp"/> 


1۸ 


>/ ۶1610156 
<fÊieldset> 


<input type="submit" value=" Jlwyر|"‎ /< 


>/ fieldset> 
> و۶‎ 
</body> 
> << 


تبدو الشيفرة السابقة كمايلي في مستعرض الویب: 


> * 3 


Favorites 0 © SQL Injection and Cross-Si...‏ د 
<I #۵ >‏ د ® مثال على استخدامة661056 © 
البيانات الشخصية 
الاسم 


العمر 


۲۱ c# Û VB.NET Û F# U 0+ ۲ 


Computer | Protected Mode: Off 9 © 12596 >‏ از 


الشكل ۲۸ : مثال على استخدام 1516105614 


Frames الاطارات‎ 


تسمح لك لغة ۳۲۱۲ بتضمین صفحات ويب ضمن صفحات آخری و ذلك عبر استخدام 


الاطارات 2065 قم ا. 


يتم استعمال الاطارات في الصفحة على مرحلتین الأولی بانشاء حاوية الاطارات باستخدام الوسم 
<]1800656> و الذي يحدد بداية عدد الاطارات التي سیتم تضمينهاء و الحجم الذي سیأخذه کل 
اطار من حجم الصفحة الكلي» و يتم تحدید الحجم بالبکسل أو بالنسبة المئوية» أمّا المرحلة الثانية 
فیتم فیها إضافة الاطارات بين وسمي البداية و النهاية للعنصر <13076561> و ذلك باستخدام 
الوسم <8" هع> و إسناد مسار الصفحة التي سیحویها الاطار للواصفة 5/6 » لنشاهد المتال 
التالي لصفحة ويب تضم إطارين الأول بحجم قدره ۷0۳۰ من حجم الصفحة الكلي و الثاني بالحجم 
الباقي من الصفحة: 

<html> 


> 2116561 ۵192۷305 , *"< 
<frame src="page_1.htm" /< 
<frame src="page_2.htm" /> 
> / frameset> 


</html> 


9 ودب دا‎ html - Windows Internet Explorer 
1 ۳ م ندا ليد د ميري ا ا ال‎ 2 > > e» 


hk Favorites ۳۹ ل‎ | SQL Injection and Cross-Si... © 1000 Popular JQuery ۰۰ 


8 C\Users\Mukhtar\Deskto... ® وهم سا - 5 م‎ + ۳۵96 Safety v Tools * 


111. I am pagel Hi!, 1 am 2 


¥ Computer | Protected Mode: Off 


الشكل ۲۹ : استخدام الاطارات بشكل عمودي 


ملحوظة: الصفحة التي تستعمل فیها الاطارات لا تحوي على وسم <000>. 


يمكن أن يقوم المستخدم بتغيير حجم الاطارات عن طریق تحريك الخط الفاصل بینهما و الظاهر 
بوضوح في الشکل السابق (انظر الشکل ۰۲۹ یمکن إلغاء هذا السلوك للإطارات عن طریق إضافة 


الواصفة noresize="noresize"‏ إلى وسوم .<frame>‏ 


في المتال السابق كانت الاطارات بشکل عمودي و لهذا تم استعمال الواصفة 0015 مع الوسم 
<۲۵۳06561]>. و يمكن جعل الاطارات بشکل آفقي عن طریق استبدال الواصفة 0015 بالواصفة 
5 لتصبح الصفحهة كمايلي في مستعرض الویب: 
د QUsers\Muk‏ 7 
سد نه و جد م 


qk Favorites چ‎ @ | SQL Injection and Cross-Si... e | 1000 Popular jQuery Plugi... 


1 2< 
© cC\Users\Mukhtar\Deskto... A 5 + كع‎ Hm + ۳۵96 Safety v Tools ۴ 


| Hi!, | am 1 


| Hi!, ۱ am page2 


Computer | Protected Mode: Off e ( 4 1220 >‏ از 
الشکل ۲۰ : استخدام الاطارات بشکل أفقي 


تذكرة: يمكن جعل الرابط یعرضص محنواه في إطار معيّن عن طریق إسناد اسم الإطار إلى واصفة target‏ الخاصة 


بالرابط <3> (انظر فقرة الروابط التشعبيّة 110۸5). 


في حين أن الوسمين <۲2۳06561]> و <۲2076> يستخدمان لإنشاء صفحة أم تضم مجموعة من 


الصفحات فقط في إطاراتها فان لغة ۳۱۲۷ توفر الوسم <113076> لتضمين صفحة ويب في 


صفحة آخری بشکل متناسق مع بقية محتوی الصفحة, و بستخدم الوسم <1]72۳06> بالصيغة 
التالية: 


<iframe 5۲ 52۳۱۳1, > 1۲206 


حیث أنّ الا هو مسار الصفحة التي سیتم تضمينهاء و یمکن ضبط حجم الاطار عن طریق 
الواصفتین 61906 و ۷۷۱0/0 بالبکسل أو بالنسبة المئوية. 


آخر ما يجب ذکره هنا أن هناك مستعرضات لا تدعم الاطارات كما أنّ الاطارات ستلغی مستقبلا 


من اللغة» على الرغم من أن بعض المستعرضات ما زالت ندعمها إلى تاريخ كتابة هذه الأسطر. 
عناصر ال ۷612 


ذکرت في بداية هذا الفصل أنَّ هناك عناصر غير مرئية تضاف في منطقة رأس الصفحة بين 
وسمي <620> و <0620/> تستخدمها محرکات البحث من أجل تصنیف صفحنك و عرضها 
ضمن نتائج البحث» و هذه العناصر هي عناصر ال 0062 و بالطبع فمن الأهمية بمکان جعل 
محرکات البحث تصثف صفحتك بشکل صحیح كي لا تخسر معظم زوار موقعك القادمین إثر 
عملية بحث ما على أحد محرکات البحث. 


يتم تحقیق عناصر ال ۲۱6/2 من خلال الوسم 77613 و بتمریر اسم 2۳06 و محتوى content‏ 
لعنصر ال ۲۱6/2 کواصفتین له» و لعل أهم عنصري 06۵۱۵ في أي صفحة ويب هما العنصران 
اللذان یحملان الاسمین 6۷۷۵۲05 و 065010107 و اللذان بستخدمان كمايلي: 


> 
<head> 


<meta name="keywords" content="xhtml website test 
meta head"/> 


<meta name="description" content="this page 
demonstrates how to use meta elements"/> 


</head> 
<00۷/>محتوی الصفحة النهائي فعلیا سبیکون هنا<10007>‎ 


</html> 
حيث يعرض عنصر ال ۷62 ذو الاسم 6۷۷۷0۲05 مجموعة من الكلمات المفتاحية التي تظن‎ 


أن المستخدمين سيبحثون عن أحدها ضمن المستعرض و الموجودة في صفحتك» أما عنصر ال 


8 ذو الاسم 2650[0100] فيحوي وصفاً مختصراً عن المحتوى الذي تقدمه صفحتك. 


بالطبع عند عرض هذه الصفحة في مستعرض الويب لا تتوقع أن تشاهد محتوى عناصر ال ۵2 
ظاهراً فمهمّة هذه العناصر كما قلنا هو تقديم بيانات عن البيانات الموجودة ضمن صفحتك. 


و بانتهاء حديثنا عن عناصر ال 1/6193 نكون قد أنهينا -بفضل الله- مناقشة لغة ۲۱۲۸/۲ بأغلب 
۳۲۱5 و لكن قبل ذلك سنستعرض لغة ۳۱۲۸/۲ الموسّعة أو ما یعرف ب ۸۳۲۳۱ أمّا الآن 


فأرى أن نعرض جدولاً بوسوم ۳۱۲۱ التقليديّة ليكون مرجعاً سريعاً عند الحاجة. 


دليل وسوم HTML‏ 


الوسم 
< 


<!DOCTYPE> 


ات !> 


<a> 
<abbr> 
<acronym> 
<address> 
<applet> 
<area /< 

<b> 

<base /< 
<basefont /> 
<bdo> 

<big> 
<þlockqoute> 
<body> 

<br /< 
<button> 
<caption> 
<center> 
<cite> 
<code> 

</ امع> 


<colgroup> 


الشرح 

لتحديد نوع المستند (سيتم الحديث عنه عند عرض 011/1ا<) 
رابط تشعبي 

اختصار لمصطلح إنجليزي مركب 
اختصار لمصطلح إنجليزي 

إضافة معلومات اتصال بمالك الصفحة 
تضمين تطبيق ]۸00۱6 ضمن الصفحة 
تعريف» هه ی الخويطة ارس 2 
نص عریض 

تعریف بادئة افتراضية لمسارات الروابط 
تعریف نوع/لون /حجم خط افتراضي لنصوص للصفحة 
تغريقت تجاه النضن 

نص كبير الحجم 

اقتباس طويل 

جسد الصفحة 

سطر جديد 

زر إرسال 

عنوان الجدول 

لتوسيط المحتوى 

اقتباس متوسط 

تعريف واصفات مشتركة لأعمدة الجدول 


تعريف مجموعة من أعمدة الجدول لتطبيق واصفات مشتركة عليها 


<dd> 
<del> 
<dfn> 
<dir> 
<div> 
<dl> 

<dt> 
<em> 
<fieldset> 
<font> 
<form> 
<frame /< 
<frameset> 
>6< إلى‎ >h1< 
<head> 
<hr /> 
<html> 
<i> 
<iframe> 
<img /< 
<input /< 
<ins> 
<isindex> 
<kbd> 


<label> 


وصف لمصطلح ضمن قائمة المصطلحات 
نص مشطوب 

تعريف مصطلح ضمن قائمة المصطلحات 
قائمة مجلدات 

قائمة المصطلحات 

متفه اضيا تاه زرم مات 
نص مشدد عليه 

مجموعة حقول في نموذج 

تعريف حجم/نوع/لون الخط لنص معين 
و 

إطار 

مجموعة إطارات 

عناصر العناوين 

رأس المستند 

خط أفقي 

عنصر بداية المستند 

مائل 

إطار كعنصر من عناصر الصفحة 
صورة 

عنصر إدخال 

إنشاء فهرس قابل للبحث يتعلق بالصفحة 
نص بخط حاسوبي برمجي 


عنوان لعنصر ما 


<legeng> 
<li> 

<link /> 
<map> 
<menu> 
<meta /> 
<noframes> 
<noscript> 
<object> 
<ol> 
<optgroup> 
<option> 
<p> 
<param /< 
<pre> 

<q> 

<s> 
<samp> 
<script> 
<select> 
<small> 
<span> 
<strike> 
<strong> 


<style> 


عنوان لمجموعة عناصر الإدخال <۲1610561> 

عنصر القائمة 

ربط المستند بمستند آخر (سيمر معنا أحد استعمالاته في الفصل الثاني) 
تعريف خريطة صورية 

تعريف قائمة 

بيانات تعريفية عن ماهيّة محتوى المستند 

لإنشاء بديل لمحتوى الإطار في المستعرضات التي لا تدعم الإطارات 
لإنشار بديل لمحتوى السكربت في المستعرضات التي لا تدعم السكربت 
تضمين كائن برمجي 

قائمة مرتبة 

مجموعة من الخیارات المرتبطة منطفياً ضمن خیارات القائمة المنسدلة 


نموذج لشيفرة برمجية 

سكربت برمجي (56۳[0 12۷۵ أو 06۳۷ز غالباً) 
قائمة منسدلة 

نص صغير الحجم 

ارف کبس رن من امه 

نص مشطوب 

نص عریض 

تعریف ورقة آنماط (یناقش في الفصل القادم بالتفصیل) 


|] 


<sub> 
<sup> 
<table> 
<tbody> 
<td> 
<textarea> 
<tfoot> 
<th> 
<thead> 
<title> 
<tr> 
<tt> 

<u> 
<ul> 
<var> 


<xmp> 


نص علوي 
جدول 
جسد الجدول 
خلية بيانات جدول 
عنصر إدخال نص متعدد الأسطر 
ذيل الجدول 
خلية عنوان رأس الجدول 
رأس الجدول 
عنوان المستند 
سطر الجدول 
نص teletype‏ 
قائمة غير مرتبة 
جزء متغير من النص 
الجدول ؛ : دلیل وسوم 471/11! 


24 
24 


XHTML 


إن 11× هي اختصار ل ۲۱۲۸/۲ 621605016 و التي تعني ۲۱۲0/۲ القابلة للتوسُع (البعض 
یدعوها ۲۸۲۱/۱ الموسعة)» و هي لا تختلف عن !۲/۲۸ التقليديّة من ناحية الوسوم و لا من 
ناحية الواصفات» و لکن ببساطة يمكن اعتبارها معاییر أكثر صرامة لكتابة مستندات ۳۱۲۱/۲ 
بشکل یتوافق و قواعد لغة 2 .)eXtensible Markup Language)‏ و هذا ما يعطي 
صفحاتنا توافقيّة أكبر مع مستعرضات الویب» كما يدل الالتزام بمعاییر 2۳/۲0/۲ على احترافية 
أكبر في العملء و بالطبع لا أريد لتفكيرنا -كمطوّري ويب- أن يبقى محصوراً في مستعرض الويب 
الخاص بالحاسوب» فلنفگر في مستعرضات الويب الخاصة بالهواتف الذكيّة أو بالأجهزة الصغيرة 
الأخرى و لنسأل أنفسنا: هل ستبدو صفحاتنا كما نريد على كل مستعرضات الويب؟» هذا ما تحاول 


۱ الإجابة عنه. 


ففي حين أن شبكة الانترنت تحوي مليارات صفحات الويب فتمَّةَ نسبة كبيرة من هذه الصفحات 
مكتوبة بشكل رديء - للأسف - يشبه مايلي على سبيل المثال: 


> 
<heaD> 
> ۱6 ره‎ U BURT />صفحة‎ ۱111 0 


BODES 


۸ 


1 0 2ظ۳1<5> 


02120120 2 و1 و 3ظ0<1> 
</boDy>‏ 
مع أن الشيفرة أعلاه ستعمل على بعض المستعرضات إلا أنها باعتقادي لن تؤمّن أدنى فرصة 
عمل لمن قام بکتابتها لأنها لا تعكس أدنى معرفه بكتابة ا1۳1 و أفضل ما يمكن أن يقال عنها 
أنها مكتوبة بشكل رديء و قد ظهرت 2۳۲۷ للحد من انتشار صفحات كالصفحة أعلاه. 


XHTML قواعد‎ 


لحن ۳۳۱۲۸۷ فی مجوغا من الماع البسیظة لك ما ام ینم تطبیقها حون کناب أ تاد 
۸۱ قفسبعة المستة تند XHTML‏ و أ تطیع تلخیص قواعد ۳۱۲۷1 في مجموعة 
لنصانح التالیة*: 


٠‏ لا تنس وسم الاغلاق. 

.10۷/6۲ 0256 اکتب وسوم و واصفات صفحنك بأحرف صغيرة‎ ٠ 
اراع أن یکون ترتیب وسوم الاغلاق متناظراً مع وسوم الفتح.‎ 

٠‏ ضع القيم المُسنّدة للواصفات بين علامات اقتباس. 

ه لا تستغن عن أي من وسوم <html>‏ و <body>‏ و .<head>‏ 


* ضع تعريف نوع المستند 000۲۷۳ في بداية صفحتك (سيعرض في الفقرة التالية). 
تعريف نوع المستند <006717/51!> 


تنص معاییر 1۲× على أن كل صفحات الويب يجب أن تحوي في آول سطر منها على 
سطر التعريف <1000178!> و الذي يعني تعريف نوع المستند 1۷06 Document‏ 
0 أو 010 اختصارك. و ذلك أن مستعرضات الويب تستخدم هذا السطر كمرجعيّة 
قواعديّة لصيغة الكتابة و لأنواع الوسوم في الصفحة. إضافة إلى استخدامها الواصفة ۳0۱05 


الخاصة بوسم البداية <4101> و التي تصف فضاء أسماء 50206 ۱2۳۲6 الصفحة. 


تعرض الشيفرة التالية عنصر تعريف نوع المستند الذي تصادفه في أغلب صفحات -/2۳۱۲0 و 
الذي يجب أن تكتبه كأول سطر من صفحتك إضافة للواصفة 00۱05 و بهذا يصبح الشكل العام 
لمستند 2۳۱۲۱۷ كمايلي: 


" ان أغلب ما سیتم ذکره من القواعد كان قد مر معنا في الصفحات السابقة على شکل ملحوظات. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtml"> 


0 >محتوی الصفحة هن <620> 


<7/>محتوی جسد 


الصفحة هنا<0007> 


> ۲1 < 


یعتبر النوع <2007۷۳۶]!> المعروض آعلاه آحد آنواع المستند و یسمّی النوع 118051010021 


و الفقرة التالية نتاقش الاختلاف بینه و بين الأنواع الأخرى. 


ملحوظة: <2007۷۳۲]!> ليس وسماً من وسوم اللغة و اّما هو سطر تعریف المسنند. 


الأنواع المختلفة للمستند 


في 2۳۱۲۱۷ هناك أربعة آنواع مختلفة للمستند و هذه الأنواع هي: 


:XHTML 1.0 Strict .١ 


يحوي هذا النوع جميع وسوم ۳۱۲ عدا الوسوم <applet>‏ و <basefont>‏ و 


<center>‏ و <dir>‏ و <font>‏ و <iframe>‏ و <isindex>‏ و <menu>‏ و 


>noframes>‏ و <9> و <9]1166> و <لا> و لا یسمح هذا النوع باستخدام |طارات 


<۲2۳06561]>. و سطر تعریف المستند من هذا النوع هو : 


EN" 


sitional .Y 


DID CHENG ا‎ 
۲ / 26۱101 EE LOE ۰.۳ 


:XHTML 1.0 Tan 


CE ANE 


Bl 


3 ۲۱۳1 U 


€ DOC 


"http: //www.w3.org/TR/xhtml1/DT 


يحوي هذا النوع جميع وسوم ا11 و لكنّه لا بسمح کسابقه باستخدام إطارات 


<۲2۳06561]>. و سطر تعریف المستند من هذا النوع هو : 


:XHTML 1.0 Frameset ۳ 


CE ۳/۸/۵۵۵۸ DED XMM 10 
17۸/1۵۵۲۲ ۳۳۵/۱۸۰۸3 SOE TAY A EL 1 {DID semi 1= 
۱۳ ع‎ 


E html PUBL] 


۰19 
91 


01571 10> 
ع 
دح 


۲ 121 3 


trans 


النوع هو : 


5 STU 0 ۳ 


:XHTML 1.1 ۶ 


DI 


D/xhtml1-frameset.dtd"> 


IE AFNIC 


9/8 


211 اوه قرع ۱۱0۵۵۲ > 


WE EOE LUN o US وص‎ 7 


یمائل النوع ٩4164‏ و لكنّه يتيح لك إضافات وحدات برمجِيّة خاصة (وحدات ۱0۷ مثلاً) 


على عكس المذکور» و سطر تعریف المستند من هذا النوع هو : 


التحقق من صحة صفحات XHTML‏ 


IC FF WIC DED ۸و ال ماع‎ ENE 
۲۵/۱۲۲۸۰۱۸3 لصت‎ ESEN 11/1۲۲/2۴۳ 1A ۰0۷ 


ST DOC YEE BEM BUBU 


ننهي الحديث عن 111/1 بالتذكير أنه بإمكان مطوّر الويب (و غيره) أن يتحقق من مطابقة 


صفح ویب ما لمعازير ۳۱۲ عبر الرابط: 


http: //www.w3schools.com/xhtml/default.asp 


ملحوظة: يعكس وضع رابط التحقق من مطابقة الصفحة لمعاییر 2۳۱۲ في صفحتك نوعاً من الثقة بقدراتك 


البرمجية باعتقادي. 


۳۳۲۱۷۱۹5 


ظهرت لغة ۱۲۷ التي شرحناها في الصفحات السابقة (المعروفة في الاوساط التقنية با لاصدار 
(HTML 4.01‏ في عام 868اممء و في الحقيقة فان تطورات کثيرة حصلت على مفهوم الویب منذ 
ذلك الحين إلى يومنا هذاء و أصبحنا نسمع بما یعرف بال 2.0 ۰۷۷۵0 كما أصبح من النادر أن 
نجد موقع ويب (أعني المواقع الجيدة) لا يقدم خدمات مثل تشغيل الفيديو و الصوت و غير ذلك؛ 
و هذا ما استوجب تطوير إصدار جديد من لغة ۲۱۱۷ بإضافة مجموعة جديدة من الوسوم و 


الواصفات إلى اللغة القديمة ليظهر الإصدار الجديد بالاسم 5 171/1ا. 


و من الميزات الجديدة التي جاعت بمجيء 5 ا11۷ ظهور وسوم خاصة لعرض الفيديو و 
الصوت و وسوم خاصة لكتابة المقالات أو الأخبار و وسوم خاصة للرسم إضافة إلى إضافة 
مجموعة جديدة من عناصر الادخال الخاصة بالنماذج و غير ذلك مما سیعرض في الفقرات 


القادمة. 
مستعرضات الويب الداعمة ل 5 ۲۱۲۲/۲ 


لأن 5 ۲۱۲۸ ظهرت منذ فترة قصيرة نسبياً (بدأ العمل على وضع معاييرها عام )5٠١5‏ فان 
معظم مستعرضات الويب القديمة لا تدعمها للأسفء و لكن المستعرضات الجديدة ستدعمها بكل 
تأكيد» ف 5 ۲۱۲۷۱ -برأيي- ستكون لغة بناء صفحات الويب المعيارية في المستقبل القريب و 
لهذا فقد بدأت بعض المستعرضات بدعهما فعلاً مثل الاصدارات الأخيرة من مستعرضات: 


1.80۲0۲ و‎ Internet Explorer و‎ Opera و‎ Firefox و‎ Google Chrome 


" لا تعتقد أن دعم هذه المستعرضات كاف لجعل 5 ا1 اللغة الرسمية لتطوير الصفحات فهناك عشرات مستعرضات الويب الأخرى 


و التي تستخدمها نسبة مرتفعة من مستخدمي الانترنت الإجماليين. 


عنصر الفیدیو ۷/1060 


تقدم 5 ۲۲/۲ آلية بسيطة لعرض ملفات الفیدیو ضمن صفحة الویب باستخدام العنصر الجدید 
<۷۱060> و يتم ذلك بإسناد القیم المناسبة إلى واصفتي الارتفاع 9اه" و العرض ۷۷۱۵ 
الخاصة به و من ثمَّ تمریر مسار ملف الفیدیو عبر العنصر الابن <50۷۲66> كقيمة لواصفته 


6و تمرير نوع ملف الفیدیو عبر الواصفة 1۷06 لنشاهد الشيفرة التالية على سبیل المثال: 


> 
<head> 
<title> 
مثال على عنصر عرض الفيديو‎ 
</title> 
</head> 
<body> 


<video width="320" height="240" controls="controls"> 


<source src="movie.mp4" type="video/mp4" />‏ 
للأسف» المستعرض الحالي لا يدعم عنصر عرض الفيديو! 


</video> 


</body> 


</html> 


يظهر المحتوى النصي (الموجود بين وسمي البداية و النهاية للعنصر <۷060>) في 
المستعرضات التي لا ندعم 5 ا1۲ أمّا في المستعرضات الداعمة لها فستبدو صفحتنا كمايلي: 


© 01716 ÇÎÊÈÇN ããaãçN' 
€ 7 © Ofile:///C:/Users/Mukhtar/Desktop/1.html 


الشكل ۳۱: عنصر عرض الفيديو الجديد كما يبدو في مستعرض جوجل كروم 


ملحوظة: إلى هذه اللحظة فان العنصر <۷60> يدعم تشغيل ثلاثة أنواع من صيغ الفيديو و هي الصيغ 
4و Ogg‏ و .WebM‏ 


يعرض الجدول التالي واصفات العنصر <۷۱060>: 


الواصفة 
audio‏ 
autoplay‏ 
controls‏ 
height‏ 
loop‏ 


poster 


SrC 


width 


القيم الممكنة 


muted 
autoplay 
controls 
قيمة بالبكسل‎ 
loop 


قيمة بالبكسل 


الشرح 

کتم الصوت 

التشغیل التلقائي لملف الفیدیو 

عرض شریط الادوات في مشغل الفیدیو 

ارتفا ع مشغل الفیدیو 

إعادة تشغيل الفیدیو بشکل تلقاتي عند انتهاته 

رابط تشعبي لصورة تعبر عن مقطع الفیدیو و تظهر قبل 
أن یقوم المستخدم بتشغیله 

رابط ملف الفيديو 

عرض مشغل الفيديو 


الجدول ٠‏ : واصفات العنصر <1060/ا> 


عنصر الصوت ۸۵۸۰0۱0 


تتيح 5 ۳۱1۷ عرض ملفات الصوت ضمن صفحة الویب ببساطة شديدة من خلال العنصر 
<0[0دا۵> و الذي يستخدم بطريقة مشابهة لعنصر عرض الفیدیو كمايلي: 
> 
> 
1 ال علي ۱ ال ار 
</head>‏ 
<body>‏ 
<audio controls="controls">‏ 
<source src="song.mp3" type="audio/mp3" />‏ 
للأسف» المستعرض الحالي لا يدعم عنصر عرض الصوت! 
</audio>‏ 
7 > 


</html> 
يبدو هذا المثال في المستعرضات التي تدعم هذا العنصر كمايلي:‎ 


© 611۴ ÇÎÊÈÇN ã4aiçÃ 
ج‎ © © file:///C:/Users/Mukhtar/Desktop/1.html 


11 777 TT 000۵ 


الشكل ۳۲ : عنصر عرض الصوت الجديد كما يبدو في مستعرض جوجل كروم 


ما في المستعرضات التي لا تدعم هذا العنصر فسیظهر النص المذکور بين وسمي البداية و 
النهاية للعنصر <audio>‏ و الذي يحوي رسالة الاعتذار. 


ملحوظة: إلى هذه اللحظة فان العنصر <310010> يدعم تشغيل ثلاث صيغ لملفات الصوت هي ۷۳3 و 099 و 
.Wav‏ 


يعرض الجدول التالي واصفات العنصر <810010>: 


الواصفة القيم الممكنة الشرح 

autoplay autoplay‏ التشغيل التلقائي لملف الصوت 

controls controls‏ عرض شریط الأدوات في مشغل الصوت 

loop loop‏ إعادة تشغيل ملف الصوت بشكل تلقائي عند انتهائه 

preload preload‏ تحميل الملف الصوت عند تحميل الصفحة بغض النظر 
عن خاصية التشغيل التقائي و عن نقر المستخدم لزر 

src‏ رابط تشعبي رابط ملف الصوت 


الجدول ٠‏ : واصفات العنصر <۷۱060> 
عناصر النماذج ۴0۲۳5 
تقدم 5 -/۲۱۲۸ مجموعة جديدة من عناصر الادخال الخاصة بالنماذج ۲0۲۳5 بالاضافة إلى 


مجموعة جديدة من آنواع عنصر الادخال التقليدي <الا100> و سنبدأ حدیثنا بالحدیث عن الأنواع 


الجديدة للعنصر <ادا00> و التي یعرضها الجدول التالي: 


قيمة الواصفة ۷06 الشرح 


email‏ عنصر خاص لإدخال البرید الالكتروني 
url‏ عنصر خاص لإدخال الروابط التشعبية 


number‏ عنصر خاص لإدخال الأرقام 


range 


date 
month 
week 
time 


datetime 


datetime-local 
search 


color 


لنشاهد المثال التالي: 


عنصر خاص لإدخال قيمة محصورة بمجال معيّن سلفاًء و يظهر هذا 
العنصر علی شكل شریط تمریر 

عنصر لإدخال التاریخ (يوم/شهر/سنة) 

عنصر لإدخال التاریخ (شهر /سنة) 

عنصر لادخال التاریخ و بستخدم لتحدید أسبوع من السنة 

عنصر لادخال الوقت (ساعة/دقيقة) 

عنصر لإدخال التاريخ و الوقت (الساعذ/الیوم/الشهر/السنة)» بالتوقیت 
العالمي 

عنصر لادخال التاریخ و الوقت بالتوقیت المحلي 

عنصر لعرض مربع البحث و هو شبیه بالنوع 161 

عنصر لادخال القیم اللونيّة 


الجدول ۷ : آنواع عناصر الادخال الجديدة في 5 ۱۱۲۲/۲ 


> DOCS IMLS 


> 
<body> 
<form action="" method="get"> 


Name: 


Mame! / CDI />‏ ال ای tVYPeE > text Mame‏ الا 


8 ال 12۱ 8 


<input type="email" name="stdnt email" /><br /< 


Website: 


> ابا‎ EVpe= url! name SLANE 021" /><BIr < 


Points: 


۸۷ 


۹5 


<input type="range" name="points" min="1" 
11222710۳7 /><br /> 


DE ۵ ¢ 
<input type="date" name="user date" /><br /> 
<input type="submit" /> 
JEON 
€ 15565 
</html> 


يبدو المثال السابق كمايلي في مستعرض الویب: 
html5.html ۳3۵‏ و 
O file:///C:/Users/Mukhtar/Desktop/html5.html‏ © ج 


name: test 
E-Mail: test@site.com 


| Website: İhttp:/iwww.site.com 


Points: 1 
Date: 2011-08-4 


Submit 


الشكل ۳۳: عناصر الادخال الجديدة كما تبدو في مستعرض کروم 
بالاضافة لما سبق ذکره نقدم ۲۱۲0/15 مجموعة من وسوم النماذج الجديدة و منها الوسم 
حاعااهاه> و الذي بستخدم لانشاء القوائم المنسدلة کخیارات إدخال افتراضيّة لأحد عناصر 
الادخال الموجودة و يُنشأ محتوی القائمة بالتعاون مع وسم <001100> و بطريقة مشابهة للعنصر 
القدیم <96۱601> كما يتم تمرير اسم قائمة الخیارات الافتراضية (عنصر <]031815>) لعنصر 


الادخال عبر الواصفة الجديدة ۰1151 لنشاهد المتال التالي: 


GDOCL AIMS 


> 
<body> 
<form action="" method="get"> 
name : 


<input type="text" list="names_ list" 
name> SANE _Meamel /-<DE 4> 


<datalist id="names_list"> 
<option label="A" value="nameA" /> 
<option label="B" value="nameB" /> 
<option label="C" value="nameC" /> 
</datalist> 
TOMS 
> 7 


C/A 

من العناصر الجديدة التي قدمتها ۲/۲۱5 أيضاً العنصران ١<‏ #ورم)> و <الام‌اناه> حيث 

يستخدم العنصر <6۷967> في عمليات تسجيل الدخول و التحقق من المستخدمين 

0 و ذلك عبر توليد زوج مفاتیح (مفتاح عمومي/مفتاحم خصوصي) يرسل مع 

<keygen name="security" /> 

آما العنصر <01ا01010> فيستخدم لعرض مخرجات كأامالا© من آنواع مختلفة مثل نتائج 
الحسابات أو القيم المُعادة من أحد توابع 5611014 2۷2 كمايلي: 


<output id="result" onforminput="resCalc )( "></output> 


۱ ۸۹ 
+ ا 


۱ 
۱ 
|| 


عنصر المریتم 20۷25 

تقدم 5 ۲۱۷ عنصر المرسم <20۷29/)> و الذي يتيح لك الرسم ضمن صفحة الویب باستخدام 

56101 2۷2۵ " و بذلك نستغني عن أية إضافات خارجية 75أونااط کاضافات ال ۳۱250 على 

سبیل المتال. 

لاستخدام عنصر المرسم يتم إنشاؤه أولاً بارتفاع 6/90 و عرض ۷۷۱0/0 محددین كمايلي: 
<canvas id="myCanvas" width="200" height="100"></canvas>‏ 

ثم يتم الرسم عليه باستخدام 50۲101 4۷4ل بشکل مشابه لمايلي: 


<script type="text/javascript"> 


var c=document.getElementById ) "2770327735 "( م‎ 
Va 0261720 ۰. 016100۳16561 )۲20۲( ۶ 

0۲ . ۶1115۷71-2 ۶ 

و 5 (OO SO‏ مه ول لد ای CSE‏ 


> 50110 


حیث قمنا أولاً بتحدید عنصر ا كلوق 8:1 لخا و :ذلك في لفط : 
و عنصر المرسم. عن طریق ص ډه و هي 


var c=document.getElementById ("myCanvas") ۶‏ 
نم قمنا بانشاء كائن ٥زط0‏ من المرسم و هيأناه للرسم ثنائي الأبعاد 20 في السطر التالي: 
(F2) 2‏ ات فان Veli EE =O‏ 
الآن و للقيام بالرسم سيتم استدعاء طرق ۱۸610005 الكائن 6 الذي تم إنشاؤه قبل قليل بالشكل: 


۶ ۶1115۷71-2 .001 
۶ 5 1507 07 7 0)) عم هلال ال اد E‏ دده 


" يمكنك قراءة المزيد عن 56011014 4۷4ل في مرجع آخر فهي خارج نطاق هذا الكتاب و لكنني سأحاول شرح استخدامها في الأمثلة. 


ففي السطر الأول تم تحدید اللون الأحمر لوناً للشکل الذي سیتم رسمه (هذا ما تعنیه القيمة 
0 نم تم رسم المربع بتمریر إحداثيات رکنیه الأيسر العلوي و الأيمن السفلي بشکل 
مشابه لما فعلناه عند تحدید مناطق الخريطة الصورية (انظر فقرة الخرائط الصوریة). 

يبدو المثال السابق ضمن الشيفرة الکاملة لصفحة الویب كمايلي: 


> ۱۲۵۵۲۲ لظ‎ AML 


<html> 


<body> 


<canvas id="myCanvas" width="200" height="100"> 
لا يدعم مستعرضك عنصر المرسم‎ 


</canvas> 


<script type="text/javascript"> 
var c=document. getElementById ) "103703122535 "( ; 
var cxt=c.getContext ("2d") ; 
cxt.fillStyle="#FFO0000"; 
cxt.fillRect(0,0,150,75); 
</script> 
< 9661 


> ۳۲1 


یعرض الجدول التالي بعض طرق ۷۱6۱۱005 کائن المرسم و وظيفة كل منها: 


" سیتم في الفصل الثاني عرض مفهوم الألوان في /۳۱۲/۷. 


fillStyle 


fillRect 


moveTo 


createLinearGradient 


addColorStop 


drawlmage 


lineTo 


تحديد لون التعبئة 
رسم مستطیل 


إزاحة 5 


الإحداثيات 


إنشاء تدرج لوني 


إضافة لون 
التدرج اللون 
لرسم صورة 
لرسم خط مستقيم 


إلى 


cxt.filIStyle="#FFOO000"; 
cxt.fiIRect(0,0,150,75); 
0.۳۱0۷6 ۲0)10,10(: 


0. 
createLinearGradient(0,0,170,50) 
cxt .addColorStop(0,'#FFO000'); 


cxt.drawlmage(img,0,0); 


cxt.lineTo(150,50); 


الجدول ۸ : بعض طرق كائن العنصر <6۵۳۷29> 


تخزين البيانات من طرف العميل 


تتیح 5 ۱۲۷ كائنين مختلفتين لتخزين البيانات من طرف العميل ]60ا) و هما: 


۱ الكائن ۱002۱5107296: يستخدم هذا الكائن لتخزين البيانات من طرف العميل لفترة غير 
محدودة و يستخدم الصيغة العامة التالية للتخزين: 


localStorage.varName="value"; 


حيث أن ۷2۲۱۵۲06 هو اسم المتغير و ۷۵/6 هي قيمة هذا المتغير و يمكن استرجاع 
ف المتغیر بالصيغة العامة الثالية: 


(2 7 


۲ الکاتن 96951005107296: بستخدم هذا الكائن لتخزین البیانات من طرف العمیل لفترة 


محددة بجلسة واحدخ فقط» و يستخدم الصيغة العامة التالية للتخزین : 


86 551 015 6 01206 . 73 (12۳6-2-۶ 


حیث أن ۷2۲۱۵۲06 هو اسم المتغیر و ۷۵/6 هي قيمة هذا المتغیر و يمكن استرجاع 
مه لت TOA‏ العامة تایه 


م ©2113 73 . 01206 0۳5 86551 


ملحوظة: هذان الکائنان يستخدمان كمخازن خاصة للبيانات أثناء كتابة شيفرات 56011014 2۷2ل. 


دليل الوسوم الجديدة في 5 ۳۲۲/1 


ختاماً لهذا الفصل نعرض فيمايلي جدولاً بالوسوم الجديدة في 5 /۲/۲۱: 


الوسم 
<article>‏ 
<aside>‏ 
<audio>‏ 
<canvas>‏ 
<command>‏ 
<datalist>‏ 
<details>‏ 
<embed>‏ 
<figcaption>‏ 
<figure>‏ 
<footer>‏ 
<header>‏ 
<hgroup>‏ 
<keygen>‏ 


<mark> 


الشرح 

مقالة 

جانب من محتويات الموقع 
لتشغيل ملفات الصوت 

للرسم برمجیا 

زر آوامر 

قائمة خیارات افتراضية لعنصر إدخال 
عنوان عنصر <19۲6]> 

E‏ شال امه 
رأس منطقة من مناطق الصفحة 
معلومات عن قسم من المستند 
توليد مفاتيح التحقق في النموذج 


<meter> 
<nav> 
<output> 
<progress> 


<rp> 


>< 

<ruby> 
<section> 
<source> 
<summary> 
<time> 
<video> 


<wbr> 


قیاسات محصورة بمدی محدد مسبقاً 

روابط تشعبية 

عرض خرج من نوع ما 

شريط تقدّم لمهمة من نوع ما 

يستخدم لغة ۳۱۱0۷ للتصريح عن ما سيتم عرضه في حالة کون المستعرض لا 
يدعم عنصر ۳۱07 

شرح لما تم التصریح عنه باستخدام عنصر ۲۱0۷ 
عنصر ۳۱۱0۷ 

لتعریف مصادر الوسائط 

یعرف ترويسة العنصر 061211 

التاریخ/الوقت 

لعرض عناصر الفیدیو 

سطر جدید محتمل 


الجدول ٩‏ : دلیل الوسوم الجديدة في 5 ۲۱۲۱/۲ 


الفصل الثانی 


CSS 3 


4 


مقدمة 


تعلّمنا في الفصل الماضي كيفيّة كتابة مستندات الويب باستخدام لغة ۲۱۲۸/5 و لكننا لم نتطرّق 
لنواحي كثيرة تتعلق بمظهر و تنسيق تلك المستندات» و في الحقيقة فقد كان هذا الأمر مقصوداً 
لأن ما يتعلق بالشكل و المظهر هو من مهمّة أوراق الأنماط الانسيابيّة 055 التي يناقش هذا 
الفصل أحدث إصداراتها و الذي يعرف ب 0553 و لكننا -في واقع الأمر- لا نستطيع أن 
نتحدّث مباشرةٌ عن 0992 لذلك سنتحدث قبل ذلك عن 055 التقليدية. 


ما هي 655 ؟ 


إن 55© هي اختصار للأحرف الأولى من الجملة 5۳661 56 025020109 و التي تُرجِمَتْ 
على أنها 'أوراق الأنماط الانسیابَّ "» ففي حین أن 111/1 تهتم بوصف عناصر مستندات الویب 
فان 085 تهتم بوصف شکل و مظهر هذه العناصر» و قد كان ظهور آوراق الأنماط الانسيابية 
الماحق الرئيسي لمشكلة من آکبر المشاکل التي واجهت مطوّري الویب لسنوات قبل ظهورها» و 
الفقرة التالية تعرض هذه المشكلة. 


مشكلة مطوري الویب قبل 0655 


عندما تم تصمیم لغة ۲۱۲0/1 كان الترکیز الأكبر على تصمیم لغة تصف عناصر صفحات الویب 
فقطء و لم يكن هناك أي توجه لدی مصممي ۲۱۲ أن تهتم لغتهم بمظهر و شکل المحتوی 
المقذم» و ترِکت هذه المهمة لمصممي مستعرضات الویب حیث كان -و ما یزال- کل مستعرض 
من مستعرضات الویب یعرض کل عنصر من عناصر صفحة الویب بمظهر افتراضي خاص به 


حسبما رأى مصممو المستعرض و بغض النظر عن رغبة مصمم الصفحة. 


' هذه الترجمة هي الغالبة على المراجع العربية. 


تم التتبه لهذه النقطة لاحقاً فأضيفت وسوم جديدة تهتم بالتتسیق و من آمثلتها الوسم <1001> الذي 
یستخدم لعرض نص بنوع خط (بنط) " ۲00۴ و حجم و لون محدد ضمن الصفحة و كان هذا 
شیئاً جمیلاً في أول الأمر لکنه سرعان ما تحول لكارثة بالنسبة لمطوري الویب. فقد كان هناك 
تنسيق هذه الصفحات تحتاج لوقت و جهد کبیرین» ناهيك عن الحاجة إلى الترکیز الشدید في ضبط 
خصائص الوسوم المذکورة سابقاً للحصول على صفحات بألوان و أحجام و آنواع خطوط موحدة و 


متجانسة» لكن و من حسن الحظ فقد تلاشت هذه المشكلة مع ظهور .CSS‏ 


بعض المواقع التي يصل عدد صفحاتها إلى منات أو آلاف الصفحات أحياناًء مما يعني أن عملية 


ما يعني بالنسبة لمطور الويب أنه سيقوم بكتابة وصف لشكل و مظهر الوسم في مكان واحد و لمرة 
واحدة فقط ثمَّ سیْطبّق هذا التنسيق على جميع مستندات الويب المرتبطة بذات ال 88©. 


البدء في استخدام 0655 
هناك ثلاث طرق لاستخدام أوراق الأنماط الانسيابية 55© في صفحنك: 
.١‏ 055 السطريّة 655 عم زاما: 


يتم إسناد شيفرة 8 إلى الواصفة ٩7۱6‏ الخاصة بكل عنصر على حدّىء انظر المثال 
التالي: 


<2/>محتوى الفقر۲<5 ۴607 :5۷7162۷00101 <p‏ 


و هذه الطريقة غير مفضلة بالنسبة لي- لأنها تعیدنا لمشاکل ما قبل 055. 


۲ 055 الداخليّة (الدفینة) 655 :Embeded‏ 


'' مع عدم اقتناعي بترجمة ۴08 إلى ابنط" لكنها وردت هکذا في معجم مصطلحات المعلوماتية الصادر عن الجمعية العلمية السورية 


يتم كتابة شیفرة 55 في منطقة ال ۳۱620 من الصفحة بين وسمي <5۵> و 
<هاراء/> لتصبح الصفحة بالشکل: 


> 

> 

<style type="text/css"> 
088 هنا يتم كتابة شيفرات‎ 

</style> 

</head> 

<body> 
تجتوى و تنا‎ 


< 7 


TY BEME: 
و تعتبر هذه الطريقة جيدة للمواقع ذات العدد المحدود من الصفحات أما بالنسبة للمواقع‎ 
المتوسطة و الكبيرة فأفضل استخدام الطريقة الثالثة.‎ 


۳ 055 الخارجيّة :External CSS‏ 
يتم كتابة کامل شیفرة 085 في ملف مستقل يحمل الامتداد 095. أولآً» ثمَّ يتم ربط هذا 
الملف مع صفحة الويب باستخدام الوسم <۱0۲> في منطقة رأس الصفحة عبر تمرير 


مسار الملف إلى واصفته ۲۵۴ و تحديد نوع العلاقة ب 50۷۱650661 كمايلي: 


<html> 
<head> 


<link rel="stylesheet" type="text/css" 
href="style.css" /> 


heads 


۹۹ 


0y>‏ >محتوی الصفحة هنا<10007> 


<< / > 
و هذه الطريقة هي الطريقة المثالية لاستخدام 68 برآيي. 
شیفرات 685 
تتکون شیفرة 085 من مجموعة من القواعد وال۳۱ تصف کل قاعدة منها مظهر عنصر أو 
مجموعة من العناصر في الصفحة و الشکل العام لقاعدة 55 هو: 


selector 1 
8:6 6615161۳7 3 ۶ 


EOE E WE VEL USF 


81۶161602 161۴ 2 ۲/۵۱ 1۱/2 ۶ 


و هذا ما یقوم بتطبیق جمیع خصاتص المظهر المذکورة بين القوسین ) و ( على كافة عناصر 
الصفحة التی تطابق المُحَدّد 56۱6610۲. 

ملحوظة: كما يبدو من اسمها فالمحددات تستخدم لتحدید عنصر أو مجموعة عناصر من صفحة الویب بغية تطبیق 
قواعد 655 عليهاء و المُحَدّدات كثيرة و متنوّعة في 055 فقد یکون المُحَدّد في أبسط حالاته اسماً لأحد وسوم 
,۷۱ سمل 51 أو 2 أو م. و قد يكون المُحَدّد 10 لعنصر ما مثل #link1‏ أو #6680611 أو #searchForm‏ 
جدول بكافة المحددات مع معانيها في نهاية الفصل. 

يتم ذكر كل خاصية من خصائص 055 بشكل زوج اسم/قيمة بالشكل: 


property:value; 


حيث أن 0۳006۲ هي اسم خاصية المظهر و ۷۵۱6 هي قيمة الخاصية و ينتهي تعریف 


الخاصية بالفاصلة المنقوطة و سنبدأ باستعراض کافة الخصائص اعنباراً من الفقرة التالية. 


تذکرة: ك ۲۱۲۸/۲ فإن 055 لا تعطي أي قيمة لمحارف الفراغات و إنما يتم استخدامها لغرض تسهیل قراءة 
الشیفرة فقط. 


توفر C55‏ مجموعة من الخصائص لتنسيق مظهر النصوص و هي: 
٠‏ خاصية المحاذاة 601-01190 و التي تستخدم كمايلي: 


h1 {text-align:center; ( 


حيث أن المحدد 01 يعني جميع عناصر <1> في المستندء و يمكن إسناد القيمة ٤٣وا‏ 
إلى الخاصية 161-21160 لمحاذاة النص لليمين أو ۱6۲6 لمحاذاة النص لليسار أو 66۳6۲ 
لتوسیط النص أو ۷ا5داز لجعل جميع أسطر الفقرة متساوية العرض ۰۷/۱010 

٠‏ خاصية التزيين (التأثيث)'' 16-06060186107 و التي تستخدم كمايلي: 


a {text-decoration:overline; [‏ م 


حیث أن المحدد 3 م يعني جميع عناصر الروابط <2> الموجودة ضمن أي من عناصر 
الفقرات <0> في المستند» و القيمة 0۷۵۲۱06 تعني عرض خط أعلى النصوص» و يمكن 
إسناد القيم التالية: ۱006 لإلغاء التزيين أو ۱006۲1:06 لعرض خط أسفل النص أو 
۱۱۱۱۵-۲۵۲ لشطب النص. 


٠‏ خاصية اتجاه القراءة 01861101 و التي تستخدم كمايلي: 


'' هم يعربون 08٥0۲‏ على أنها "أثاث" و لهذا أوردت التأثيث بين قوسين» علماً أنني أرى أن التزيين هي الترجمة الأنسب. 


بر ماع ا OLESEE LOR‏ ۵ 


لجعل اتجاه القراءة من اليمين إلى الیسار و هذا ما تعنیه القيمة !۲ (اختصاراً ل 10 4اوأ؟ 
۴ و يمكن جعل اتجاه القراءة من الیسار لليمين باسناد القيمة |١‏ إلى الواصفة 
.direction‏ 

و خاصية تحويل حالة الأحرف 671-1۲205]07۳021100] و التي تستخدم كمايلي: 


{text-transformation:uppercase; }‏ م 


لجعل جميع آحرف عناصر <0> بحالة الحرف الكبير "'» و يمكن أن تأخذ هذه الخاصية 
القيم ۱۱۵06۲0256 للحروف الكبيرة أو ۱0۷۷6۲0256 للحروف الصغيرة أو 030121126 
لجعل الحرف الأول فقط من كل كلمة حرفاً کبیرا. 

٠‏ خاصية إزاحة البداية 1671-1006001 و التي تستخدم كمايلي: 


9 (EEE - 1 ۱0611:2006 | 


لازاحة أول كلمة من المقطع بمقدار ۲۰ بکسل, و الازاحة غالبا ما تستخدم مع بداية فقرات 


اللغة الإنجليزيّة. 
٠‏ خاصية اللون 001017 و التي تستخدم كمايلي: 


ب( SESE‏ هبو اوه )...۱۵ 


حیث أن المحدد م يعني جميع العناصر <> الموجودة في الصفحة و يتم إسناد اللون 
للخاصية 00۱0۲ اما باسناد اسم اللون باللغة الانجليزية مثل ۲60 أو 9۲660 أو white‏ 


..لخ» أو بإسناد قيمة اللون بالنظام الست عشري ۲۱۵۵060۳۵۱ مثل #۴۴0000 أو 


" هناك لغات تعطي أكثر من رسم لنفس الحرف فمثلاً الحرف الأول في الانجليزية يرسم ۸ إذا كان في حالة الحرف الکبیر و 3 في 


خاله الخرف لصو 


0 أو #۳۳۳۳۳ ..الخ» أو باسناد قيمة اللون عبر التابع ۲90 بالشکل 
(۲90)255,0,0 أو (۲90)0,255,0 أو (۲۵0)255,255,255 ..إلخ. 


توضیح: یتشکل کل لون من مزج ثلاثة آلوان هي الأحمر و الأخضر و الأزرق» و تختلف الألوان عن 
بعضها باختلاف نسبة كل من الأحمر/الأخضر/الأزرق فیها. و في حالة تمثیل اللون بالنظام الست 
عشري يتم اعتبار آول خانتین تمثلان درجة اللون الأحمرء و يتم اعتبار ثاني خانتین تمثلان درجة اللون 
الأخضرء و يتم اعتبار ثالث خانتین تمثلان درجة اللون الأزرق» و بالطبع تتدرج قيم کل خانة بين 00 
كأدنى قيمة و ۴۴ كأعلى قيمة» فعلی سبیل المثال للحصول على اللون البنفسجي يجب مزج اللونین 
الأزرق و الأحمر دون أي نسبة من اللون الأخضر و بهذا تصبح قيمة اللون البنفسجي #۴۴00۴۴ و 
يمكن التحکم بتدرج اللون عبر تخفیف درجة الاحمر و الأزرق لتصبحا على سبیل المتال #880088 و 
هكذاء أما في حالة تمثیل اللون عبر التابع ۲90 فتمثل الخانة الأولى اللون الأحمرء و تمثل الثانية اللون 


لنشاهد المثال التالي و الذي یعرض استخدام خصائص مظهر النصوص: 


> 
<head> 
<title> 
مفجة اختيار لجساكى مير التدوم‎ 
CIEE 
<style type="text/css"> 
P 1 
text-align: justify; 
6010 #220000 : 
text-decoration :underline; 


direction:rtl; 


</style> 
</head> 
<body> 
<p> 
إن هذه الصفحة عبارة عن صفحةه اختبار لخصانص مظهر النص في‎ 
اوران الاتمجاط الانسيايية ى قد مدنا إطلالة التي اللموجود‎ 
بين وسمي بداية و نهاية هذه الفقرة ليظهر عمل خاصية‎ 
. المحاد اة في لقطه االشاشك التي سوف نعرضها لهذه الصفحه‎ 
> / حرق‎ 
</body> 


REMI > 


و الذي يبدو في مستعرض الويب كمايلي: 


اک یت ۳۳ سملن 
E‏ 1 ^ ^+ 
Popular jQuery Plugi...‏ 1000 8۱ چ prem Favorites‏ 

© كا - 8 + ® | | .صفحة اختبار لخصائص مظهر ان‎ ۸۵ + Pe 


۱ 


إن هذه الصفحة عبارة عن صفحة اختبار لخصائص مظهر النص فى آوراق 


الأنماط الانسيابية و قد تعمدنا اطالة النص الموجود بين وسمی بداية و نهاية 
هذه الفقرة لیظهر عمل خاصية المحاذاة فى لقطة الشاشة التی سوف نعرضها 
لهذه الصفحة. 


Computer | Protected Mode: Off‏ از 


الشكل ۳4 : استخدام خصائص مظهر النصوص 


خصائص الخطوط ۴٥٣۸٤۶‏ 


توفر C55‏ مجموعة من الخصائص للتحکم بالخطوط ۰۳0۳/5 و يتم التعامل مع الخطوط في 
5 على شکل مجموعات تدعى کل منها ب'عائلة خطوط" [0۳01-12۳۳0]» حيث يتم اسناد خط 
يتيم "' أو آسماء أكثر من خط مفصولة بفواصل 60۳0۳72 إلى الخاصية 001-12۳01 و یکون 
الخط الأول هو الخط الافتراضي, و في الحالة التي يتعذر على المستعرض فیها العثور على الخط 
الافتراضي فانه یجعل الخط التالي هو الافتراضي و هکذا. 


توفر C55‏ ثلاثة عوائل افتراضية من الخطوط هي العائلة 56/1 و العائلة ]5209-85611 و 
العائلة ۷00090206] و ينصح باستعمال العائلة الثانية للغة الانجليزية و العائلة الثالثة عند عرض 


الشیفرات الحاسويية مثل شیفرات لغات البرمجة في صفحة الویب. 


كما توفر 085 مجموعة آخری من الخصائص للتحکم بالخطوط هي الخاصية 001-506] و 
التي يمكن أن تسند إليها القیم ءاه (الخط المائل) و 00۳۳2 (الخط العادي)ء و الخاصية 
۲00-6 و التي تستخدم لتحدید حجم النص بالبکسل أو بالواحدة 600 (کل ۱ 6۳ = ٠١‏ 
بکسل)۰ لنشاهد المثال التالي: 


> 
<head> 
<title> 
الخطوط‎ NE اختبار‎ Ea 
EE LE 


<style type="text/css"> 


۳ اجترحت مصطلح الخط اليتيم للحالة التي تكون فيها عائلة الخطوط مكونة من خط واحد. 


P 1 
font-family: "Tahoma", "Simplified ۸۳2۳1 6۲ , 5۵۳85-5611۶ : 
۶0۳-51 26 :1 . 7 
font-style:italic; 


61 125 12ت 1 كرت‎ ¢ iE E Û 


</style> 
</head> 
<body> 


<P> 


إن هذه الصفحة عبارة عن صفحة اختبار لخصائص الخطوط في أوراق 
اهاط ال سا 1 . 


> / 8 
> BOS 


> 1 


و التي تبدو كمايلي في مستعرض الویب: 


Windows Internet Explorer‏ - صفحة اخت 


© © © [ C\Users\Mukhta\D چا‎ | X || $| Google 


.چ ج ۰( ج اكه س سفت 


$ Favorites کپ‎ 8 1000 Popular jQuery Plugi... 8 | SQL Injection and Cross-Si... 


@ صفحة اختبار لخصائص الخطوط‎ ۶ ۰ E + كا‎ 999 + Pager safety + Tools v 


٠‏ إن هذه الصفحة عبارة عن صفحة اختبار لخصانص الخطوط في أوراق 
الأنماط الانسیابية. 


Computer | Protected Mode: Off ۶ ( R100% >‏ از 


الشكل ۳۵ : استخدام خصائص الخطوط 


ملحوظة: لم نضع علامتي اقتباس حول القيمة ]9208-96۲1 لأننا نقصد عائلة الخطوط الافتراضية و التي تحمل 


„sans-serif اسم‎ 


خصائص مظهر الروابط 


في الحقيقة لا توجد خصائص خاصة لمظهر الروابط» و لكن توجد محددات خاصة للروابط 
تستخدم لتنسيق مظهر الرابط في حالاته المختلفة» و المحددات هي: 


٠‏ 2:06 و الذي يستخدم لتنسيق مظهر الرابط في حالته العادية و هو مكافئ للمحدد 3 إذا 
استخدمَ وحده. 

٠‏ 3:151160 و الذي يستخدم لتنسيق مظهر الرابط الذي تم النقر عليه مسبقاً. 

۰ 2:00۷6 و الذي يستخدم لتنسيق مظهر الرابط عندما مرور موشر الفأرة عليه. 

۰ 2:201۷6 و الذي يستخدم لتنسيق مظهر الرابط لحظة النقر عليه. 


و المثال التالي يعرض استخدام هذه المحددات الخاصة: 


> 
<head> 

<title> 
صفحة اختبار لخصائص مظهر الروابط‎ 

EEE 

<style type="text/css"> 
a:link {text-decoration : 086 7 color: blue; ( 
a:visited{color: green; } 
a:hover{ text-decoration: underline; } 
a:active{font-size:120%;} 


</style> 


> / 20 


<body> 


<a 2 حرح هناد مهب 12ت‎ COE 


<a href="www.google.com">visited link</a> <br/> 


> 2 ۱82۵۵: 211 7 6 اد 6ت‎ OLAS 


A MES ل‎ 1-5 206412 Link 2 جرج‎ COIS 


> / 07 


</html> 


يبدو المثال السابق في صفحة الويب بعد زيارة بعض الروابط: 


567 < 
Os file:///C:/Users/Mukhtar/Dı 1 چه‎ ۱ 2 ۱۱ $Y Google A 


2 
( Favorites 9 8 1000 Popular jQuery Plugi... 8 SQL Injection and Cross-Si.. ۳۶ CSS Positioning 


<2 ¬ 
-@ ۲0۵6 نامک مود + @ 3 - 6 + A‏ ...صفحة اختبار لخصانص مظهر الر 8 


normal link 
visited link 
hover link 


normal link 2 


الشكل ۳۰ : هكذا تبدو صفحة اختبار مظهر الروابط لحظة النقر على الرابط الثالث و بعد زيارة الثاني 


ملحوظة: يجب ذكر قاعدة 2:110۷6۲ بعد 2:11 و a:visited‏ كما يجب ذکر a:active‏ بعد .a:hover‏ 


خصائص الخلفیات Backgrounds‏ 


توفر 085 مجموعة من الخصائص لتنسيق خلفيات العناصرء نبداً استعراضها بالحديث عن 
الخاصية /536101010170-06010 و التي تستخدم لتحديد خلفية لونيّة لأحد العناصر بإسناد قيمة 


اللون إليها بالشكل: 


1117 011۳101-0010 1 010 192 
و يمكن تعيين صورة كخلفية لأحد العناصر عبر اسناد مسار الصورة للخاصية 920109۲0۷00 


6 بالشکل: 


1۳0۵06۰10917 ) 12121 : 06 011۳707-1119 0160 2ط 


و في حال کون حجم الصورة (الخلفيّة) آصغر من حجم العنصر يتم تحدید طريقة تکرار الصورة 
عبر الخاصة 0209۲0۷۳0-۲60۵696 فیتم إسناد القيمة *-۲۵0۵6۵21 لتکرار الصورة بشکل أفقي أو 
القيمة ۲۵0621-۷ لتکرار الصورة بشکل عمودي أو ۲6069 لتکرارها بشکل أفقي و عمودي معا أو 
00-6062 لعدم التکرار و هذا في الحالة الأولی» آما في الحالة الثانية فیمکن عدم تکرار الصورة 
و تحدید موضعها عن طريق الخاصية 02060۲0۷۳0-009100 حیث يتم إسناد واحدة أو آکثر 
من القیم ۱00 left‏ أو left center‏ أو left bottom‏ أو center top‏ أو center center‏ أو 
center bottom‏ أو right top‏ أو right center‏ أو bottom‏ htوiا»‏ لنشاهد المثال التالي و 
الذي سنعرض فيه عنصرين <0> الأول بخلفية لونية و الآخر بخلفية صورية: 
<html>‏ 
<head>‏ 
1ج > 
صفحة اختبار لخصائص الخلفية 
2185 1ع / > 
<style type="text/css">‏ 
.firstP {‏ 
background-color :black;‏ 


color:white; 


} 


.secondP { 


background-image : url ) ۱1۳۵061 . Jpg’ ( ; 
1 16 1017۳۴0-6۳06 : 20-1 


center center;‏ : 110۳ 1 0170-۳005 ۲ 016 3ط 


} 
OME EEL J‏ هه اه 9 
CAS EE‏ 
</head>‏ 
<body>‏ 
<p class="firstP">‏ 
العنصر الول سیبدو بخلفية سوداء و لون نص آبیض 
BX‏ 
<P class="secondP">‏ 
< المكصر ار يقلنية صورية و لمكا 
5 سأقوم بالنزول بضعة آسطر بفية منج هذا العنصر 
<br/>‏ 
المساحة الكافة لعرض النصورة الجالفية 
275 
</body>‏ 
> 
ملحوظة: هناك طريقة خاصة لتحدید العناصر تعرف باسم التحدید بالفئات 0125565 حيث يتم استبدال المحدد بأي 


اسم مسبوقاً بنقطة و هذا ما یعرف بتعریف الفثة 0255 في 88). بعد ذلك يتم إسناد اسم هذه الفئة (دون نقطة) 


إلى الواصفة 61295 للعناصر التي نرغب بجعل مظهرها مطابقاً للخصائص المذكورة في قاعدة الفئة. 


يبدو المثال السابق في مستعرض الويب كمايلي: 


۱۰ ۱ 


مد ۱ ۲22۱ 
1 م 


۱ ار‎ Computer | Protected Mode: Off “4 


3 تسد :ا 


الشكل ۳۷ : هكذا تبدو صفحة اختبار خصائص الخلفية 
۰ ۳ ۰ 4 ا 
خصائص مظهر القوائم 


يتم تخصیص مظهر القوائم في C55‏ عبر تخصیص نوع الرمز/الرقم المعروض آمام کل عنصر 
من عناصر القائمة» و يتم هذا من خلال الخاصیتین التالیتین: 


۰ ۷06->اایاعاا: و التي تستخدم لتحدید نوع الرمز/الترقیم أمام کل عنصر من 
عناصر القائمة» و تأخذ القیم 0016 و 503۲6 و 0156 و 006 في حالة 
القائمة غير المرتبة و القيم ۱۵۵6۲-۲۵۳30 و 10۷۷۵۲۲۵۲3۲ و ۱0۷/6۲ 
۵ و ۱۵۵9۲-۵۱002 و ۱۵۷۸۷۵۲-۱۵10 و ۱۵۵۵۲-210 و decimal‏ و 
غیرها في حالة القائمة المرتبة. 

۰ 6-۱۳296ا اه اونا: و التي تستخدم لوضع صورة خاصة آمام کل عنصر من 


عناصر القائمة كرمز له» و تستخدم بالشکل: 


11 5-517 16- 1170206 : 1121 ) ۲1۳0206. 011 (۶ 


لنشاهد المثال التالي: 


> 
<head> 
<title> 
صفحة اختبار لخصائص مظهر القو انم‎ 
>/ 61 21 
<style type="text/css"> 
ul {list-style-type: square; ( 
ol {list-style-image:url ('dot.gif');} 
</style> 
</head> 
<body> 
> 
<li>item 1</li> 


ادا 2 11 2 ا ال > 


>13<1 6۳0 3/13 


ادا > وراد ال > 


ای 2 سوه اد راد ال > 


ای که لكت 62 هار ان > 
اررق > 
</body>‏ 


€ 1 


۳31 


سح سم Wind...‏ - صفحة اختبار لخصانص مظهر القوائم @ 


3 © C\Users\ Mukhtar 3 + 2 || + Google 


qh Favorites ج‎ © [ 1000 Popular jQuery Plugi... 


ع بج ۰ ۸ ..صفحة اختبار لخصائص مظهر الق © 


item 1 
item 2 


item 3 


item 1‏ الا 
item 2‏ 


item 3 


A125% ۴‏ ۳ و Computer | Protected Mode: Off‏ از 
الشكل ۳۸ : هكذا تبدو صفحة اختبار خصائص مظهر القوائم في مستعرض الويب 


خصائص مظهر الجداول 


توظیف خصائص 055 التي رضت تايا الشکل المتاسب» لنشاهد المثال التالي ول 


> 
<head> 
<style type="text/css"> 
table 
1 
۶01۲-۶218131 اطه ۲۱۵0۱ : رز‎ Mol, 59525 7 هو‎ ۶ 
1 1 0۳: 105۶ 


border-collapse: collapse; 


ما اعد HECE LOIS‏ ادا) 


text-align:center; 


td, th 


font-size: lem; 


border:1lpx solid #98bf21; 


th 
1 
1 OME ۵ 2رد‎ E ل‎ 7 
م 110-001-0:42 20 0160 قط‎ 
CO ESE E E EE و‎ 
1 
.31 td 
000000۳ 
92 010 1011101-0010 ۳213 
/ 
> م‎ > 
</head> 
<body> 
E HOLE > 
E 


> />الشركة<ط‎ t< 


١1 


حطع />العنوان < 2 > 


EBENEZER 


GEES 


EI 


<0/ >الشركة الوهمية 1-0<۱> 


<0خ / >دمتىق<كا> 


<۲/ >سوریا<0 > 


VEE 


<tr class="alt"> 


<0/ >الشركة الوهمية 1-0<۲> 


يبدو هذا المثال في مستعرض الويب كمايلي : 


> >بغداد<0‎ / ٤ d< 


> 0< >العراق‎ / t< 


GEES 


SES 


</table> 
</body> 


> / ۳۲1 


@ C\Users\Mukhtar\Desktop\firstPage.html - Windows Internet Explorer 
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الشركة الوهمية 1 
الشركة الوهمية 2 
الشركة الوهمية 3 
الشركة الوهمية 4 
الشركة الوهمية 5 
الشركة الوهمية 6 


بى | + 125% |7 49 Computer | Protected Mode: Off‏ از 


الشكل 5" : توظيف 655 لتنسيق مظهر الجداول 


و ما يجب ذكره من خصائص 95 عند الحديث عن المثال السابق هو مايلي: 


(0106: و التي يسند إليها قيمة بالبكسل تعبر عن سماكة حدود الجدول و لون يعبر عن 
لون الحدود بالإضافة إلى تحديد نوع الحدود (خط متصل 5010» خط متقطع 025/160 
منقط 001160 .. لخ)» و بالطبع يفصل محرف المسافة بين هذه القيم (سيتم الحديث عن 
هذه الخاصية بشكل أكثر تفصيلاً في فقرة لاحقة). 

۰ 00066-0013056: و التي تحدد هل سيتم طي حدود الخلايا و اعتبار وجود حد واحد 
بين كل خليتين (القيمة ©601305) أم سيتم اعتبار حد كل خلية مستقلاً عن الآخر. 
ملحوظة: لتسهيل قراءة محتويات الجدول ينصح دائماً بجعل أسطر الجدول متناوبة ألوان الخلفية و آلوان النصوص 
كما فعلنا في الجدول المعروض في مثالنا السابق» و هذا ما حققناه عبر استخدام الفئة )ا2. » يعرف هذا التناوب 


اللوني باسم Zebra-stripping‏ 


خصائص الموضّعة 505111011110 


يكون محتواه كبيراً جداًء كما يتيح وضع عناصر خلف عناصر أخرى» و هناك عدة أنواع لتحديد 
موضع العنصر في 055 في الحقيقة و هي: 


« النوع الستاتيكي 518]6: يتم وضع العنصر في مكان ظهوره في الصفحة أي بحسب 
ترتيب و موضع ظهور وسمه ضمن وسوم الصفحة و هذا النوع هو الافتراضي. 

« النوع الثابت 1©0: يتم وضع العنصر طبقاً لإحداثيات ثابتة يتم إسنادها بالبكسل 
للخصائص 00 و أا و 1011 و 00/10۳ مع إسناد القيمة 1*60 إلى الخاصية 
0 و بالطبع يتم اعتبار الركن العلوي الأيسر للصفحة مركزاً للإحداثيات. 

« النوع النسبي 6۱۵0۷۵: يتم وضع العنصر طبقاً لاحدائیات ثابتة يتم إسنادها بالبسكل 
للخصائص 00 و ۱6 و ۲9 و 00100۳70 مع إسناد القيمة ۲6۵1۷6 إلى الخاصية 
0 و يتم اعتبار الركن العلوي الأيسر للعنصر_نفسه في حالته الستاتيكية مركزاً 
للإحدائيات. 

« النوع المُطْلّق 18لاا6050: يتم وضع العنصر طبقاً لإحداثيات ثابتة يتم إسنادها بالبكسل 
للخصائص 00 و اها و 51011 و 0010۳ مع إسناد القيمة 20501016 إلى الخاصية 
7 و يتم اعتبار الركن الأيسر العلوي لول عنصر أب بموضع غير ستاتيكي 
مركزاً للإحداثيات» و في حال عم وجود أي عنصر أب بموضع غير ستاتيكي يتم اعتبار 
الركن الأيسر العلوي للعنصر </11407> مركزاً للإحداثيات. 


لنشاهد المثال التالي: 


<html> 


<head> 


<style type="text/css"> 
ما‎ ١ ع ك2 س1 1ن‎ OME EEL ۲ 
ML 
{ position:absolute; left:100px; top:150px; } 
</style> 
</head> 
<body> 
۳ ۱ الصنو ان اج اتيات مط۱‎ ١ هة‎ 


في حالة الاحد اثیات المطلقة يتم عرض العنصر طبقا <م> 
ا رح اتات الممرة لخصانصه بعض النظر عن مان ورورد وسمه کی 
<2/>شيفرة الصفحة 


> OOS 


> 1 


و الذي يبدو في مستعرض الویب کمايلي: 
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في حالة الإحداثيات المطلقة يتم عرض العنصر طبقاً للإحداثيات الممرة لخصائصه بغض النظر عن مكان 


ورورد وسمه في شيفرة الصفحة 


هذا العنوان بإحداثيات مطلقة 


> 125% ( وم Computer | Protected Mode: Off‏ از 


الشكل ٠١‏ : مثال على استخدام خصائص موضّعة العناصر في 0655 


ملحوظة: المحدد الخاص * يقوم بتحديد جميع عناصر المستند. 


۱1۸ 


یمکن وضع عناصر خلف عناصر آخری عن طریق الخاصية *2-1006 و ذلك باسناد رقم 
صحیح إليهاء حیث يتم إظهار العنصر ذو ال 2-1006 الاعلی آمام العناصر الأخرىء لنشاهد 


المثال التالي: 


الخاض بها 


<html> 
<head> 
<style type="text/css"> 
ACU 2 2 عات‎ LOS عت‎ 
img 
1 
2051 1 08 : 2059011۶ 
16۴1 : 1006۶ 
136۵5 SOE 
z-index: - 1 م‎ 
1 
</style> 
</head> 
<body> 
هتو اق االققرة اة‎ 1 
<img src="imagel.jpg" width="100" height="140" /> 
سرف تطبر المورة ی مدا الناتون لان عة الو‎ 
z-index 
اقل من القیمة الخاصة بالنص ر التي تساوي صفر‎ 
ار‎ 


> 0< 


> BOS 


۲ > 
و الذي يبدو في مستعرض الویب کمايلي: 


۳ agg ۳0 
@ C\Users\Mukhtar\Desktop\firstPage.htm... #ک کار‎ 


9 Favorites ۳ 86 1000 Popular JQuery ۲۱۷.۰ 


@ C\Users\Mukhtar\Deskto... 4 E 


1 أن قيمة ال 2-1006 
الخاص بها اش من او التي تساوي 
صفر بشکل افتزاضي 


Computer | Protected Mode: Off ¢ 612596 >‏ از 
الشكل ۱؛ : مثال على استخدام الخاصية 2-1016 
يمكن أيضا عرض آشرطة تمرير في الحالة التي يكون فيها محتوى العنصر أكبر بکثیر من حجمه 
و ذلك عن طريق اسناد القيمة !|560101 إلى الخاصية ۰0۷6۲۲۱0۷۷ لنشاهد المثال التالی: 
> 
<head>‏ 
<style type="text/css">‏ 


۶ ۱۵۱۵ اه‎ E CEM 


div 


background-color :FOUEEEE; 


17 1 01۳ F2 5006۶ 


1006۶ ¢ 0۳1 61 
overflow:scroll;‏ 
} 
</style>‏ 
</head>‏ 
SBOE‏ 
3177 > 
لان ايعاد المتصر الجالي ستكون اقل من ايعاد الن < 
الذي تقرأه الآن سيتم عرض أشرطة التمرير و لهذا سأحاول إطالة 
<2/> النص أكثر بإضافة بعض الكلمات الإضافية إليه. 
ركنن /> 
OOS‏ > 


> ۲1 


يبدو المثال السابق كمايلي في مستعرض الویب: 


a C\Users\MukhtaiA\Desktop\firstPage.html - Win... 


۱ 9 ۳ J| Googl 
2 زرت)‎ ۳3 C\Users\ Mukhtar ۱ + ۱ 2 | | Google 
$ Favorites چ‎ e 1000 Popular jQuery Plugi... 
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الشكل ۲؛ : مثال على عرض أشرطة التمرير للعناصر ذات المحتوی الكبير 


واحدات القیاس في 655 


يتم تحدید آبعاد العناصر على سبیل المثال من خلال خاصيتي العرض ”الاس و الارتفاع ۵1004 


وذلك باسناد قیم رقمية بالبکسل أو بإحدى واحدات القیاس التالية: 


الواحدة الشرح <<< 2 22 مثال 

px‏ بكسل 1م130 
% بالنسية المئوية 50% 
em‏ كل ۱ 6۳ يساوي ١6‏ بکسل 1.5em‏ 
in‏ انش 11 
cm‏ سنتي میتر 1cm‏ 
mm‏ ميلي مبنر 100mm‏ 
pt‏ نقطة (النقطة - < إنش) 30pt‏ 
عم بیکا (البیکا - ۲ نقطة = 2 إنش) 15pc‏ 


الجدول ٠١‏ : واحدات القياس في CSS‏ 


نموذج الصندوق 1001 50 055 


عند الحدیث عن تصمیم صفحات الویب يجب في الحقيقة فهم ما یعرف بانموذج الصندوق" أو 
6 00۶ بالإنجليزيّة» حیث يتم تمثيل کل عنصر من عناصر مستند ۲۱۲۱ عند إنشائه في 
المستعرض بأربعة مستطیلات متداخلة تشکل نموذج الصندوق و هي من الداخل إلى الخارج: 


. محتوی العنصر 0001601: و یمثل كل ما هو موجود بين وسمي بداية و نهاية العنصر‎ -١ 

۲- الازاحة الداخلية 0200109: و تمثل المسافة الفاصلة بين محتوی العنصر و بين حدوده. 

۳- الحدود 00۲06: و يمثل الاطار الخارجي للعنصر . 

٤‏ - الازاحة الخارجية 02۲910: و تمثل المسافة الفاصلة بين حدود العنصر و العناصر 
الأخرى في المستند. 


۲ 


یوضح الشکل التالي نموذج الصندوق: 


الشکل ۳ : نموذج الصندوق ۳۱۵۵61 ×٥ط‏ 


تتيح 055 لمطوّر الویب التحکم الکامل بکل منطقة من هذه المناطق الأربع عبر مجموعة من 
الخصائص نستعرضها في الفقرات التالية. 


خصائص الحدود 00۲06۲ 


تسمح 055 لمطور الویب أن یتحکم بحدود العناصر عبر الخصائص 00۳0۵6۲-۷۵10 و 
0۲۳06۲۷6 و ۰00۲06۲-000۲ يتم إسناد قيمة رقمية باحدی واحدات القیاس إلى الخاصة 
00۲06۲ تعبر عن مقدار سماكة الحدود» و يتم إسناد قيمة نصية تعبر عن شكل الحدود 
للخاصية 00۲6۲-50۷۱6 و التي يمكن أن تأخذ إحدى القيم 001160 للحدود المنقطة و 025060 
للحدود المتقطعة و 5010 للحدود العادية و 00۷10۱6 للحدود المضاعفة و 9۳00۷6 و ۲1096 و 
inset‏ و 0001561 للحدود ثلاثية الأبعادء و يتم إسناد قيمة لونية تعبر عن لون الحدود. لنشاهد 
المثال التالي: 

<html> 


<head> 


<style type="text/css"> 
۶ [ 61001556 2 و‎ EELS ۲ 
.one 
{ border-style:solid; } 
. two 
{ border-style:dashed; } 
</style> 
</head> 
<body> 
<P 21۳2952۷0۳86۲ >حد ود عادیب‎ /< 


</>حد ود متقطعة 02۳2852۷11۷70۳ <P‏ 


> 7 
</html> 
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الحدود متقطعة ل 


Done از‎ Computer | Protected Mode: Off tg -| ه98‎ 12595 > 


ملحوظة: يمكن تحدید شکل 00۳06۲-5 خاص لكل طرف من أطراف الحدود و ذلك عن طريق إسناد آربعة 
قیم مفصولة بفراغات للخاصية 00۲06۲-50۱6 تمثل الأولى شکل الحد العلوي و الثانية شکل الحد الأيمن و الثالثة 
شکل الحد السفلي و الرابعة شکل الحد الأيسر بالشکل: 


border-style: dotted dashed groove double; 


أو عن طريق الخصائص الفردية border-left-style‏ و border-right-style‏ و border-top-style‏ و 


eاsty-bottom- order‏ و بالطبع فان هذه الملحوظة تنطبق على خاصيتي اللون 0۲067-0010۲ و العرض 
.border-width‏ 


خصائص الإزاحة الداخلية 0200189 


يتم تحديد مقدار الإزاحة الداخلية (المسافة بين محتوى العنصر و حدوده) عن طريق الخصائص 
020009-1 لإزاحة الطرف الأيسر و 0300179-110114 لإزاحة الطرف الأيمن و -300100م 
0 لإزاحة الطرف العلوي و 0200109-00110۳0 لإزاحة الطرف السفلي» أو عن طريق الخاصية 
9 لازاحة جميع الاطراف» و يُستّد إلى هذه الخصائص قيم بإحدى واحدات القياس تعبر 
عن مقدار الإزاحة الداخليةء لنشاهد المثال التالي: 


> 
> 563612 
<style type="text/css"> 
P 
) 03 16016310۳8: :هه 1۵0162 :0180-60101( 20160 ما‎ ۳/1 Ee, | 
. 210 
padding-top: 25px; 
padding-bottom: 25px; 


padding-right: 50px; 


padding-left: 50px; 
} 
</style> 
</head> 


BOYS 


هذه هي التجاال: الطلبيجة لعٍتصار الفترة دمن از اجه جوک 
<0/>د اخلبة 


هذه هي حالة عنصر الفقرة مع وجود الإزاحة <p class="padding">‏ 
<0/> الد اخلبة 


</body> 


TIME 
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هذه هى حالة عنصر الفقرة مع وجود الإزاحة الدا خلية 


Computer | Protected Mode: Off ۶ 125996‏ قر 


بج سس رجح 


الشكل ٠٤‏ : مثال على استخدام خصائص الإزاحة الداخلية 
خصائص الازاحة الخارجية 0131011 
يتم تحديد مقدار الإزاحة الخارجية (المسافة بين حدود العنصر و العناصر الأخرى) عن طريق 


الخصائص ۳۱۵۲9۱0-۱666 لإزاحة الطرف الأيسر و ۳۵۲9-۲006 لازاحة الطرف الأيمن و 


۱۱۵۲9۱۳۱-0 لإزاحة الطرف العلوي و ۱۵۲۵۱-۵010۳ لإزاحة الطرف السفلي» أو عن طريق 
الخاصية 7731017 لإزاحة جميع الأطرافء و يُسنّد إلى هذه الخصائص قيم بإحدى واحدات القياس 
تعبر عن مقدار الازاحة الداخلية أو القيمة الخاصة 30010 لترك هذه المهمة لمستعرض الويب» 


لنشاهد المثال التالي: 


} 


001091 7۳1 EE 


<0/> اما هذه 


> 
<head> 
<style type="text/css"> 
P 
{ 1ت 23716 15-22 لع ع و هرود عت تكله‎ 611 ۶ ۱۵ 2 
.margin 
{ 
margin-top :100px; 
margin-bottom: 100px; 
margin-right: 50px; 
margin-left: 50px; 
} 
</style> 
</head> 
<body> 
<0/>هذه الفقرة دون ازاحهة خارجیبة<0>‎ 
<p class="margin">ةيجراخ الفقرة فمع إزاحة‎ 
</body> 


</html> 


و الذي يبدو في مستعرض الويب كمايلي: 


۲7۵8 C\Users\Mukhtaı 
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N °‏ ا رک 
هده انقعرهد دون إزاحة حارجيه 


۷6 + و۶ Computer | Protected Mode: Off‏ از 


الشکل 4۰ : مثال على استخدام خاصية الازاحة الخارجة ۲۵۲91۳ 
إخفاء العناصر 
من الممکن |خفاء عناصر ۲۱۲3۷ باستخدام 055 بطریفتین: 


©» اسناد القيمة ۱۱006 إلى الخاصية 015012۷. 


٠‏ اسناد القيمة 0۱0060 إلى الخاصية /9اانطانها۷. 


و الاختلاف بینهما أن الطريقة الثانية تخفي العنصر مع الحفاظ على الحیز الذي يشغله فارغاً آما 
الطريقة الأولى تخفي العنصر مع عدم الحفاظ على الحیز الذي يشغله مما يؤثر على تموضع 
العناصر. 


أنواع عرض العناصر 


يتم عرض العناصر في ا1۲۷ بطريقتين: 


٠‏ بشکل كتلة 0۱00#: حیث يتم النزول سطراً قبل العنصر و النزول سطراً بعد العنصر و 
هذه الحالة نراها مع عناصر مثل <81> و <0> و <0۷>...لخ. 

ه بشکل سطري ۱0۱06: حیث يتم وضع العنصر ضمن نفس السطر دون الحاجة للنزول 
سطراً و هذه الحالة نراها مع عناصر مثل <3> و <5020> ...إلخ. 


تسمح 055 بتغییر نوع العرض للعناصر من 0۱006 إلى 1۳۱06 و بالعکس عن طریق إسناد 
احدی القيمتین 0۱001 و 10۱76 إلى الخاصية 015012۷. 


opacity الشفافیه‎ 


الظهور التام بشکل طبيعي. 


التّعويم 1102311076 


تعتبر خاصية التعويم 1021 من آهم الخصائص التي تقدمها 055 للحفاظ على تموضع متناسق 
للعناصر حيث يتم تعويم جميع العناصر إلى جهة واحدة بالنسبة لعنصر محددء و التعويم في 
5 تعويم أفقي إما إلى اليمين )"۲۵ أو إلى اليسار 16]6. 


عند تعويم عنصر ما فإن العناصر التي تليه سوف تلتف حوله (تعوم) بما يتلاءم و تعويمه؛ أما 
العناصر التي قبله فلن تتأثر بالتعويم» لنشاهد المثال التالي: 


> 
<head> 
EELS ۷۵۵۲۵۰۲/0 


JUSCEEWE |‏ ۵ هم El LS EOE‏ و هاماد عت 2 2 كله اب 0 


img ) ۶10۵1: 21017 }‏ 
</style>‏ 
</head>‏ 
<body>‏ 
<P>‏ 
و GIME SEE UONC MEO OLE‏ 
ماو جر نمی مسا مریم تھے ما ماوق نمی ما مت و نھ ما موی 
موئ تھے ما بحنتویم نمی با سنوی تھے سا توق مھ سا موق 
اسدواتن هق لصي ما 
IDS‏ 
</body>‏ 


د ۳1 > 


و الذي يبدو في مستعرض الویب کمايلي: 


س 


a a 25 2 9 ی‎ 7 
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محتوى نصي ما محتوی نصي ما محتوى نصي ما محتوى 
نصي ما محتوى نصي ما محثوى نصي ما محتوی نصي 
ما محتوی نصي ما محتوى نصي ما محتوى نصي ما 
محتوی نصي ما محتوی نصي ما محنوی نصي ما محتوى 


نصي ما محتوى نصي ما محثوی نصي ما محتوی نصي 


في 120 دقيقة 


ما محتوى نصي ما محثوى نصي ما محتوى نصي ما 


نصي ما محتوى نصي ما محثوى نصي ما محثوی نصي 


Computer | Protected Mode: Off ۶۱۳۱ R140% >‏ از 


الشكل 45 : مثال على استخدام خاصية التعويم 21021 

كما تلاحظ فقد تم تعويم الصورة إلى اليمين من النص و التف المحتوی الذي يليها بما يتلاءم و 
موضع الصورة الجديد بعد التعويم» و التفاف النص بهذا الشكل المتناسق لم يكن ليحدث لو تم 
وضع الصورة في هذا الموضع بطريقة أخرى. 

فائدة: جرّب تغيير حجم نافذة المستعرض و لاحظ احتفاظ الصفحة بتناسقهاء ثمّ جرب حذف خاصية التعويم من 
الصفحة و لاحظ الفرق في حال تكرار ذات العملية. 

بالطبع و كما ذكرنا سابقاً أصبح واضحاً الآن أن الخاصية 7034 تقوم بتعويم العنصر إلى جهة 
اليمين أو إلى جهة اليسارء نم تقوم بتدوير العناصر التالية له لتتلاءم و موضع العنصر المُعَوَّم؛ و 
بالطبع يمكن أن یتلو/پسبق العنصر المُعَوَّمم الحالي أي قدر من العناصر المعوّمّة الأخرى و لهذا 
تتيح C55‏ منع وجود عناصر عائمة بجوار العنصر الحالي باستخدام الخاصية 1637© مع 


عناصر عائمة من الیسار أو 1و۲ لمنع وجود عناصر عائمة من اليمين أو 00/۳ لمنع وجود 


عناصر عائمة من الجهتین. 
تعلیقات 055 
يتم كتابة التعلیقات البرمجية في أوراق الانماط الانسيابيّة 055 بين */ و /* كمايلي: 

/* comment . 


آنواع الوسائط 0۷065 Media‏ 


مظهراً و شكلاً معيناً عند استعراضها في مستعرض الويب و منحها مظهراً و شكلاً مختلفاً تماماً 
عند عرضها على الورق (طباعتها)...إلخ. 


يتم تحقيق ما سبق ذكره من خلال وصف نوع 1۱6012 ما قبل مجموعة قواعد 0585» و نوع 
8 آخر قبل مجموعة قواعد 055 أخرى حيث يتم تطبيق كل مجموعة عند الحالة المذكورة 
في قاعد ال ۰۵۲06012 لنشاهد المثال التالي: 


<html> 
<head> 


> ۷716 ۷۵۵۵۰ CSS 


26013 screen 
1 
1م25‎ 
1 626-21 1 07: 6 


TOR SE EL,‏ 6 2 1 اتام) 


هذا 


هو 


color:white; 


} 


IOC 1 


background-color: green; 


المحتوی النصي لمستند 
E‏ تا 


۱۳۳ 


8۳6012 print 


1۲ 
1 
JUSEEY;‏ :00 11 2- 16261 
و لاه و لكت اد و6 ۵ع: اتام) 
J‏ ]0۵۵101:01 
} 
</style>‏ 
</head>‏ 
<body>‏ 
<P>‏ 


الويب الذي سوف يبدو بطريقتين 
الجارةم علي النئاشة. و المرتن علي 
الو رق امنيا هة + 


B> 
</body> 


د ۳۳1 > 


يبدو المثال السابق عند العرض في مستعرض الویب کمايلي: 
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هذا هو المحتوی النصي لمستند الويب الذي سوف يبدو بطريقتين مختلفتین في حالتي العرض 
على الشاشة و العرض على الورق/الطباعة. 


Computer | Protected Mode: Off‏ از 


الشكل ٤١‏ : استخدام القاعدة media‏ @ 
و يبدو على الورق (في نافذة المعاينة قبل الطباعة في الحقيقة) كمايلي: 


8 Print Preview 


1 Page View > ۳ Custom ” 250 1 


الشکل 48 : استخدام القاعدة 601012 


یمکن أن نضع بعد هالع" © إحدى القیم التالیة: 


aural 
braille 
embossed 
handheld 
print 
projection 
screen 

tty 


۷ 


الشرح 

جمیع أجهزة العرض 

للأجهزة الناطقة 

الأجهزة المعتمدة على اللمس 
طابعات الأجهزة المعتمدة على اللمس 


لكل الطابعات 
لأجهزة الإسقاط (الراشق مثلاآً) 


لكل الأجهزة التي تستخدم شاشات ذات عرض محرف ثابت (كالمبرقة الكاتبة). 
لكل الأجهزة الشبيهة بالتلفاز 


الجدول ١١‏ : قيم القاعدة 0012© 


و بانتهاء حديثنا عن قواعد ال 116013 نكون قد أنهينا -بفضل الله- مناقشة 55© بأغلب 
خصائصهاء و سنتابم في الصفحات التالية استعرض خصائص :695 العضترئة و التي تعرف 


باسم 883 أمّا الآن فأری أن نعرض جدولاً بمُحَدّدات 055 التقليديّة ليكون مرجعاً سريعاً عند 


لخاد 


دلیل محددات 0655 


#70 


مثال شرح المتال 

Mukhtar‏ . کل العناصر ذات الواصفة 
"class="Mukhtar‏ 

#name‏ کل العناصر ذات الواصفة 
"id="name‏ 


2 


130 
130,130 


tag tag 


tag>tag 


tag +tag 


[attribute] 
[attrib ute=v] 


[attribute~=v] 


[attribute|=v] 


:link 
:visited 
:active 
:hover 
:focus 
:first-letter 


:first-line 


div>a 


div+p 


[src] 


[src=image.jp9] 


[target~= blank] 


[href|=http://] 


a:link 
a:visited 
a:active 
a:hover 
input:focus 
p:first-letter 


p:first-line 


كل الغناصيل 

كل عناصر الوسم <0> 

كل عناصر الوسم <3> و كل 
عناصر الوسم <م> 

كل عناصر الوسم <3> الموجودة 
داخل <۷أك> 

كل عناصر الوسم <3> الموجودة 
داخل <0:۷> بشكل مباشر 

کل عناصر الوسم <> الموجودة 
مباشرة بعد عنصر <0[۷> 

كل العناصر التي تحوي الواصفة 5۲0 
کل العناصر التي تحوي الواصفة 5۲0 
مسنداً الیها القيمة 9م[.۱۵96] 

كل العناصر التي تحوي الواصفة 
8 مسنداً الیها قيمة لا تساوي 
_blank‏ 

كل العناصر التي تحوي الواصفة 
8 مسنداً إليها قيمة تبدأ ب 
http://‏ 

كل الروابط التي لم يتم النقر عليها 
كل الروابط التي تم النقر عليها 

الرابط الفعال حالياً 

الرابط الذي تمر عليه الفأرة الآن 

كل عناصر الإدخال الفعالة حالياً 

آول محرف من کل عنصر <> 

آول سطر من کل عنصر <> 


:۲۱۲5 ۲-۵ 


:before 
:after 


:lang(language) 


p:first-child 


p:before 


p:after 
p:lang(en) 


الجدول ۱۲ : محددات 0685 


كل عنصر <0> یکون الابن الأول 
لعنصره الأب 

ادراج محتوی قبل کل عنصر <0> 
إدراج محتوی بعد كل عنصر <0> 
تحدید کل عنصر <> تبدأ قيمة 


واصفته ۸9| بالقیمة 60 


CSS 3 


مع تطور مفهوم الویب (خصوصاً مع ظهور ال 2.0 ۷۷60) ظهرت الحاجة إلى تحسین أوراق 
الأنماط الانسيابية لتحقیق تصامیم أجمل في مواقع الویب دون الحاجة إلى الافراط في استخدام 
برامج التصمیم و هذا ما دفع إلى ظهور الاصدار الجدید من آوراق الأنماط الانسيابيّة و المعروف 
ب 6553. 


تضيف 0553 مجموعة من المحددات و الخصائص الجديدة إلى 055 التقليدية و اصطلِحَ على 


تسمية كل مجموعة من هذه الخصائص أو المحددات باسم الوحدة ©1/00101» و لعل أهم الوحدات 


المضافة هي: 


وحدة المحددات الجديدة 

وحدة الحدود و الخلفيات الجديدة 

وحدة تحسين نموذج الصندوق 

وحدة مؤثرات النصوص الجديدة 

وحدة التحويلات الهندسية ذات البعدين 
وحدة التحويلات الهندسية ذات الثلاثة أبعاد 
وحدة الحركات 

وحدة الصفحات متعددة الأعمدة 


وحدة واجهة المستخدم 


المستعرضات الداعمة 


بالنسبة ل 553© فهي مدعومة من أغلب مستعرضات الويب الحديثة و بشكل أوسع بكثير من 
دعم ذات المستعرضات ل 111/1-5ا. 


الحدود الجديدة Borders‏ 0553 


تتيح 0553 انشاء الحدود ذات الزوایا غير القائمة (0۲06/5ظ 0۲6۲ )Round‏ بسهولة و 
يسر و دون الحاجة لاستخدام أي من برامج التصمیم (مثل ۳/۵۸۵۵0۳0) التي طالما استخدمت 
لتحقیق هذه المهمة عبر خاصية جديدة هي الخاصية 20006-17390105 و ذلك باسناد قيمة الیها 
بإحدى واحدات القیاس» تعبر القيمة المسندة عن نصف قطر قوس الدائرة المقتطع كزاوية للإطارء 
لنشاهد المثال التالي: 


> ۱00۲۷ 55 ۲۳/۲ 05110 e WSC DED 7۳1۲ ۰1 111 ۳ 
۲۸۵: ۲۲۱۲۱۰ ۲3 ۰ ۵019/۲5/۳۲۱4 160056 ل‎ 


> 
<head> 
<style type="text/css"> 
Ol 
1 
0106 :20 solid 17 
192003 ۳0 : 10026 40px; 
192 0107 010۳0 : ۶ 007 
1 1 0۳: 30 006۶ 
border-radius: 25px; 
-moz-border-radius:25px; /* Firefox 3.6 and earlier */ 
} 
</style> 
</head> 


<body> 


<div>The border-radius property allows you to add 0 
corners to elements.</div> 


</body> 


> 7/۳1 


و الذي يبدو في مستعرض الویب کمايلي: 


@ firstPage.html 
ج‎ © © file:///C:/Users/Mukhtar/Desktop/firstPage.html % ™ 


The border-radius property allows you to add 
rounded corners to elements. 


الشكل ٠۹‏ : استخدام خاصية 0۵0۲06۲-۲۵05 في مستعرض کروم 
ملحوظة: مستعرض ۳۱۳6۲06 یعتبر أن اسم الخاصية هو -moz-border-radius‏ 


كما تتيح 0553 إنشاء حدود العناصر بالاعتماد على صورة صغيرة تعبر عن أصغر شکل ممکن 
للاطار 
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و يتم إنشاء الإطار بطريقتين: 


۰ 6#»063160: بتكرار جزء من الصورة. 


۰ 91۲61010: بتمديد جزء من الصورة. 


الإطار بتكرار جزء من الصورة 


و الشكل الجانبي يوضّح الفرق بين الطريقتين 


الإطار بتمديد جزء من الصورة 


المذكورتين. 
يتم إنشاء الحدود الصورية من خلال تمرير الشكل ۵۰ : الاطارات الصورية في 6553 


مسار الصورة إلى الخاصية cborder-image-source‏ ثم اسناد احدی القيمتين ۲60621 أو 
stretch‏ إلى الخاصية /]۰00۳06۲-1۳۱296-76069 ثم اسناد عرض الاطار بالبکسل إلى 
الخاصية :801061-1730©6-١0/1011‏ و إسناد قيم مناسبة بالبكسل إلى الخاصيتين -/60,06 
۱۳299-6 و outset-image-0rderط‏ لتحديد جزء الصورة الذي سيتم تكراره أو تمديده 
لصنع الإطار. 


ملحوظة: يمكن استخدام الخاصية المختصرة ©1572606-/601706 و التي تجمع جميع الخصائص السابقة بالصيغة 


border-image:source slice width outside repeat; 


لنشاهد المثال التالي الذي يعتمد على الصورة التي عُرِضَّت سابقاً لصنع الإطار: 


> ۱00۲۷ 55 ۳/۲ 051,10 ۳۲-۸۲۲30۲۲۲ 1۳1 4,01 1 roma ۳ 
۲۵: لاما‎ ۲3 ۰ ۵1۲9/۲5/۲۲۲4 160056 OES 


> 
<head> 
<style type="text/css"> 
117 
1 
border-width : 1 06۶ 
17 1 0۳: 25006۶ 
102003 ۳0 : 1010 67۶ 
-webkit-border-image:url (border.png) 30 30 stretch; 
} 
</style> 
</head> 
<body> 


<div> Here, the image is stretched to fill the area.</div> 


۱۱ 


ا 


مره > 


> ۲1 


و الذي يبدو في مستعرض الویب کمايلي: 


/ © firstPage.html a ۹ 
۱ ج‎ © © file:///C:/Users/Mukhtar/Desktop/firstPage.html ۲۲ و‎ ۱ 


0/7 ٠... سس 232127777723 اس سسا‎ = 
Here, the image is stretched to fill the 


2162 


الشكل 5١‏ : الإطار الصوري في مستعرض جوجل كروم 
ملحوظة: مستعرض 11/610 يستخدم البدائة -0002- قبل أسماء الخصائص المذكورة آعلاه» و مستعرضا 
531811 و Chrome‏ يستخدمان البادئة 7060/17 و مستعرض 006/3 يستخدم البادئة -0- 
تتيح 0553 أيضاً إنشاء ظل لعنصر ما عبر الخاصية 00-5130011 و التي يسند إليها قيمة 
لونية تعبر عن لون الظل و قيم بالبكسل تعبر عن احدائیات الظل. لنشاهد المثال التالی: 


tional / ۳۲‏ اد 4,01 MME‏ اطناراس / ۱۵ 1124 ته ات ات ۲ ۱9 ۱ > 
۰.0۳ 160056 0159/۲5/۲۲۲4 ۰ ۲3 ۲۵/۲۲۲۰ 


> 
<head> 
<style type="text/css"> 
div 
1 
1 1 01۳: 30 06۶ 
height :100px; 


106 016 0 1 01210-601 01 : E J LO 


-webkit-box-shadow: 10px 10px 5px #888888; 
} 
</style> 
</head> 
<body> 
E AGE 
€ 7 


</html> 


و الذي يبدو في مستعرض الويب كمايلي: 


/ © firstPage.html a 
3 © file:///C:/Users/Mukhtar/Desktop/firstPage.html] SC 


الشكل ۰۲ : خاصية الظل كما تبدو في مستعرض كروم 


ملحوظة: يستخدم مستعرضا 52126 و ۱۳0۲6 البادئة -أ)ا۷6- قبل اسم الخاصية 
الخلفيات الجدیدة CSS3 Backgrounds‏ 


في 0553 تم إضافة خاصيتين جديدتين لمساعدة مطور الويب على التحكم بالخلفيات بشكل 
أفضل» الأولى هي الخاصية 020/0۲0۷۳0-5126 و التي تسمح بتحديد آبعاد الصورة الخلفية 
بالبكسل مما يسمح بإعطاء الصورة كخلفية أبعاداً تختلف عن الأبعاد الأصلية للصورة و هو ما لم 
يكن سمكناً فل 00553 ي انتضداه هده الخاضيية كما : 

يدم 3 1 


67 800 :276 31 0160011۳707-5 132 
يعني الرقم الأول إلى عرض الصورة في حين أن الثاني يشير إلى ارتفاعها. 
ملحوظة: في مستعرض ۳۱۲۵۲0 تسبق الخاصية بالبادئة -5002- 


أما الخاصية الثانية فهي الخاصية «1و0200۲0۷۳0-0۲1 و التي تحدد أحد أجزاء نموذج 
الصندوق ليتم تطبيق الخلفية على أساسه و يمكن أن تأخذ إحدى القيم 60006-060 لتطبيق 
الخلفية على المستطيل المحدد بالمحتوی أو “0300170-50 لتطبيق الخلفية على المستطيل 
المحدد بالمحتوى و الإزاحة الداخلية معاً أو 070617-00 لتطبيق الخلفية على المستطيل المحدد 
بالمحتوى و بالإزاحة الداخلية و بالحدود و الشكل التالي يوضح الفرق بين المستطيلات الثلاثة. 


border-box 


الشكل ٩۳‏ : نموذج الصندوق بالنسبة لخاصية الخلفية في 6553© 
ملحوظة: في مستعرضي 5319/1 و ۱۳0۲6 يتم استخدام البادئة -أ6kس-‏ 
من التحسينات التي أضيفت إلى خاصية الخلفية في 0553 السماح بإضافة أكثر من صورة في 
نفس الوقت كخلفية لنفس العنصر و ذلك عبر الفصل بين كل خلفية و الأخرى بالفاصلة بالشكل: 


192 010101۴0-112 06 : 2۴51 )260101 : (ع01‎ DUEL )1۵20162 ORO 


خصاتص تنسیق النصوص الجدیدة في 6553 


ثم إضافة مجموعة من الخصائص الجديدة لتنسيق النصوص في CSS3‏ نعرض بعضها في 


الجدول التالي: 


۱۵۱۲۱۵۱۲۱۵۹-۵ 01 


punctuation—trim 


text-justify 


text-outline 


text-overflow 


none‏ أو first‏ أو 


allow- أو‎ last 
force- أو‎ end 
end 


start‏ أو end‏ أو 


allow-end‏ أو 
adjacent‏ أو 

none 
inter- أو‎ auto 


inter- أو‎ word 
أو‎ ideograph 
أو‎ inter-cluster 
أو‎ distribute 
trim او‎ ۵ 
عن العرض و قيمة‎ 
لونية تعبر‎ 

اللون 


ماام أو 5أ5م[اا© أو 


۱ 
۱:۰ 


عن 


string 


نحدد وضع علامة الترقیم خارج حدود 
العنصر <p>‏ 


تزيل علامة الترقيم الافتتاحية من بداية كل 
سطر من آسطر <م> 


تحدد طريقة تحقيق المحاذاة عندما تكون 
قيمة الخاصية 1۱670-0190۲ مساوية ل 


Justify 


تحدد عرض و لون الحدود الخارجية 


أا 


النص أطول من العنصر الحاوي له 


text-shadow 


text-جwrap‎ 


word-break 


word-wrap 


قيمتين رقمتین و 
قيمة لونية 

normal أو‎ none 
unrestricted أو‎ 


suppress آو‎ 


normal‏ آو 
0۳۵۵۲۵ أو 
hyphenate‏ 

normal‏ آو 
word-break‏ 


تڪ ظلاً للة 


کو 


تحديد طريقة تقسيم الكلمات الطويلة 


7 اككفية : اقات التصتوطن ر كن 
الكلمات الطويلة بناء على الطريقة المحددة 
في الخاصة word-break‏ 


الجدول ۱۳ : خصائص تنسيق النصوص الجديدة في 6553 


يعرض المثال التالي استخدام إحدى هذه الخصائص: 


لا 1 1 2175 ۲ 


۱۱۱۱۵ ات۵‎ BENT BUBU NE NSC DAD HEMT 4 
۲۵: ۲۲۲۰ ۲3 ۰ ۵019/۲5/۲۲۲4 160056 OES 


> 
<head> 
<style type="text/css"> 
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1 


text-shadow: 5px 5px 5px #880000 : 


/ 
</style> 
</head> 


<body> 


۱ ١ الم‎ >1< 
</body> 


</html> 
0553 خصائص الخطوط الجديدة في‎ 
التقليدية كان من واجب مطوري صفحات الويب استخدام الخطوط الشائعة و الموجودة‎ 55 ۲ ِ 
في آغلب حواسیب زوار الصفحة و ذلك أن المستعرض لم يكن قادراً على عرض أي خط غير‎ 
موجود في خطوط حاسوب زائر الموقع» مع 0553© آصبح بالإمكان استخدام أي خط ضمن‎ 
5۲06 صفحة الويب بعد وضع ملف الخط ضمن ملفات الموقع و و إسناد مساره إلى الخاصية‎ 
لقاعدة 1001-1966© الجديدة كلياً و التي تستخدم كمايلي:‎ 
.©101-1520© أولاً- يتم تعريف اسم عائلة جديدة باستخدام القاعدة‎ 
ثانياً- يسند اسم العائلة الذي أَنْشِئَ سابقاً إلى الخاصية 1001-1201۷ بشكل تقليدي.‎ 
ملحوظة: مستعرض 0۱06۲ 171617764 يدعم الخطوط ذات النوع 601. فقط بينما تدعم باقي المستعرضات‎ 
.016 النوعين 8]6. و‎ 
لنشاهد المثال التالي:‎ 


> ۱00۲۷ 25 HEM EVE UE ۳۲-۸۲۲30۲۲5 1۳1۲ 4.01 12 2251 121 ۳ 
۲۸۵: ۲۲۱۲۰ ۲3 ۰ ۵010/۲5/۳۲۲4 160056 25 


> 
> 6861 
<style type="text/css"> 
@Gfont-face 
{ 


font-family: myFont; 


src: url ) ' ۹289615108 Light.ttf') 


,url ('Sansation_Light.eot') format ("opentype"); /* IE 7 
div 


font-family :myFont; 
} 
> 5۷16 
</head> 
<body> 
<div> 
یمکن استخد ام أي نوع خطوط لهذا النص‎ 
> 7 
</body> 


</html> 
2D Transfornatioټ0n التحويلات الهندسية ذات البعدين‎ 


تمکننا 6593 من اجراء تحویلات هندسية شائية البعد علی عناصر الصفحة کالاتسحاب 


۵ و التدوير ۲0/216 و تغییر الحجم 6 و غیرها باسناد أحد توابع التحویل إلى 


الخاصة 1۲206]0۲۳7۲]. 


ملحوظة: مستعرض ۲0۱0۲6۲ ۱0۱۵۲۳6۱ بستخدم البادئة -505- قبل اسم الخاصية. و مستعرض ۳۱۲60 
يستخدم البادئة 2۳0027 و مستعرض 006/3 بستخدم البادئة -0- و مستعرضي ۱۲۳0۳۱6 و 5318/1 یستخدمان 


البادئة -]۱۷/۵01- 


و الجدول التالي يعرض توابع التحویل الجدیدة؛ 


9 


التابع 

(۳-2 ۷ 
translateX(n 
translate (n 
scale(x,y 
scaleX(n 
scaleY (n 
rotate(a 
skew(Xa,Y a 


skewX(a 


ا ا لض ( | >| سا >| سا | س | > | < 


skewY (a 


لنشاهد المثال التالي: 


الشرح 

ينقل العنصر إلى الإحداثيات الممرة له 

قل العتصر على المحون × مسافة ۱ 

يقل رد على و ۷ اة 

يغير بعدي العنصر إلى البعدين الممررين له 

يغير بعد العنصر > إلى القيمة " 

يغير بعد العنصر ۲ إلى القيمة ١‏ 

يقوم بتدوير العنصر بزاوية ,0 

يقوم بإجراء تحويل الانحراف وفق الزاويتين 20 و ,۷۵ 
يقوم بإجراء تحويل الانحراف على المحور × وفق الزاوية .0 


الجدول ١4‏ : توابع التحويل الهندسي ثنائي البعد في 6553 


۲۳ 1 زو وه 2.01 OTT‏ ا ل 1ل رع 11 م ۱۳0۵۲۷ > 


۲۵: ۲۲۱۰ ۲3 ۰ ۵10/۲5۹/4 160056 ۰.۳ 
> 
<head> 
<style type="text/css"> 
div 
1 
-webkit-transform: skew )3 و00‎ ,20069( ; 
17 1 01۳: 10 006۶ 
height : 75px; 


17 عدن 01270-001 1 0160 3 15 


1901106 : 1026 ۵130و‎ Black; 


} 
</style> 
</head> 
<body> 
> 01 7<1]6 ود‎ COSY ۵016۱/017 
</body> 


REM 


و الذي يبدو في مستعرض الويب كمايلي: 


© firstPage.html 
ج‎ © O file:///C:/Users/Mukhtar/Desktop/firstPage.html ۷۱ 


الشکل 4ه : مثال على تحویل 56۷ في مستعرض جوجل کروم 


ملحوظة: الأحرف 089 التي تم تمریرها بعد الأرقام إلى تابع التحویل تعني درجة 060766 و ذلك تمييزاً عن 


الرادیان و الذي ترمز له الأحرف ۲20 


التحویلات الهندسية ثلاثية الأبعاد 4130510111131101 3D‏ 


تتيح 0553 القیام بتحویلات هندسية ثلائية الابعاد على العناصر بنفس الاسلوب السابق و لکن 


باستخدام التوابع التي یعرضها الجدول التالي: 


التابع 
translate3d(x,y,z‏ 
translateX(n‏ 
translateY (n‏ 


translateZ(n 


۱ 

۱ 

۱ 

۱ 
5621630),:۷,2( 
scaleX(n) 
scaleY (n) 
scaleZ(n) 

۱ 


۲۵/263 0), , a 


rotateX( a 


( 
rotateY (a 
( 
( 


perspective (n 


0 


۱ 
۱ 
۱ 
۱ 


الانتقال المتحرك 112310511101 


الشرح 


ینقل العنصر إلى الاحدائیات الممرخ له 
ینقل العنصر مسافة 0 على المحور × 

ینقل العنصر مسافة 0 على المحور ۷ 

ینقل العنصر مسافة ١‏ على المحور 2 
تالكر ال الااد رة 

يغير بعد العنصر × إلى المقدار 0 

يغير بعد العنصر 7 إلى المقدار 0 

يغير بعد العنصر 2 إلى المقدار 0 

يقوم بتدوير العنصر على المحاور الثلاثة بزاوية 
مقدارها ا 

يقوم بتدوير العنصر على المحور ‏ بزاوية .0 
يقوم بتدوير العنصر على المحور ۲ بزاوية ب 
يقوم بتدوير العنصر على المحور 2 بزاوية 0 
يحدد منظور الرؤية 


الجدول ٠١‏ : التحويلات الهندسية ثلاثية الأبعاد في 6553 


توفر 0553© طريقة جميلة و مميزة لإنشاء تأثير على عناصر المستند يعرف هذا التأثير الخاص 


باسم الانتقال المتحرك و الذي يتم تحقيقه عبر الخاصية 1310511100 حيث يتم تطبيق قاعدة 55) 
مختلفة عن القاعدة الأصلية للعنصر خلال زمن محدد مما يظهر العنصر بشكل متحرك. 


1٥1 


عن طریق الصيغة: 


2128151 610۳85: ۵1006۵1 0۵2۵10 


حيث تعبر 0۲006۲ عن اسم الخاصية التي ستتغیر و 0۲211010 تعبر عن الزمن و يمكن تغيير 


أكثر من خاصية بالصيغة: 
CEG,‏ .7,۰ 001۴2110۳2 19100۵۷72 م۵011 كه عات لات 0100۵61 610۳85 12151 


لنشاهد المثال التالي: 


<I DOCSIS ME ۲ظتاظ‎ 1۲0 ۲۸/۷3۵۹۵۸۲۲ MOMS 2.01 ۲۳215 1 ۲ 
۲۱۵: ۲۲۲۰ ۲3 ۰ ۵159/۲5/۲۲۲4 LOOSE ۰.۳ 


<html> 
head > 
<style type="text/css"> 

div 

1 
width: 100px; 
height: 100px; 
background: red; 
-webkit-transition:width 2s, height 2s; 

} 

div:hover 

{ 
width: 200px; 
height: 200px; 


webkit-transform:rotate )180060( ; 


</style> 
</head> 
<body> 

<div>Hover over me to s the transition effect!</div> 
</body> 


> ۳۳1 


ملحوظة: لن آذکر البادئات التي تستخدمها المستعرضات الشهيرة هنا فمن المفترض أنك اعتدت علیها الآن و سأنوه 
إلى أن الحرف 5 بعد القيمة الرقمية يعني أن الزمن بالثانية 5660000 


حرکات 6553© 


تتيح 0553 انشاء حرکات مخصصة في صفحة الویب مما يغني مطور الویب عن استخدام 
صور ال آآو. المتحركة أو تأثیرات 1351 و غیرها ضمن الصفحف و يتم إنشاء الحرکات 
أولاً- يتم تعریف اسم خاص للحركة في القاعدة 06۷1۲206 و تحدید ماهیتها عبر تحدید 
الوضع الابتدائي 1۳0۳0 و الوضع النهائي 0ء و بالطبع عند تطبیق الحركة يتم الانتقال من الوضع 
الابتدائي للعنصر إلى الوضع النهائي خلال فترة زمنية مما یجعلنا نشعر بالحرکة. 


ثانياً- يتم إسناد اسم الحركة و زمن تنفيذها إلى الخاصية 2001002100 الخاصة بالعنصر . 


لنشاهد المثال التالي: 


> ۱00۵۲۲ EIN, 110ظ07اظ‎ ۳۲-۲۲30 /۲۲۲ HNL, 4.01 ۳۴2093 LORAN ۲۳ 
۲۱۵: ۲۱۲۰ ۲3 ۰ ۵10/۲5۹/4 160056 ۰.0۳ 


<html> 


<head> 
<style type="text/css"> 
7 
1 
17 1 01۳: OOO 
height :100px; 
background: red; 
-webkit-animation:myAnimation 7 
@-webkit-keyframes myAnimation 
1 
from {background: red; ( 
to {background:yellow; } 
} 
</style> 
</head> 
<body> 
E E 
</body> 


</html> 

المثال السابق يعرض انشاء حركة بالاعتماد على الحالة البدائية و الحالة النهائية للعنصر أثناء 

لحركة حيث أن الحالة البدائية تعبر عن شكل العنصر لحظة بدء الحركة و الحالة النهائية تعبر 
عن شكل العنصر لحظة نهاية الحركة. 


یمکن تخصیص شکل العنصر في کل لحظة من لحظات الحركة عبر انشاء قاعدة 085 خاصة 
بهذه اللحظة ضمن قاعدخ ۵916۷/۲۲۵۳۲95) بالشکل : 
myAnimation‏ ۶۴2765 0-161 ۵-۵161 
1 
( 7 560 : 0160۲012۳0 ۳2) 05 
{backgroung :green;width:150px;color:white; }‏ 155 
{height: 350px; }‏ 50% 
{background:yellow; }‏ 100% 
} 
حيث أن 0% تعني لحظة بداية الحركة و 100% تعني لحظة نهايتها و القيم الأخرى تعبر عن 
فترات أثناء حدوث الحركة. 


ملحوظة: تحدث هذه التغيرات أثناء الحركة و يعود العنصر إلى شكله الطبيعي عند انتهاء الحركة 
الأعمدة المتعددة في 6553© 


تسمح 0553 بعرض محتوى العناصر على شكل أعمدة متعددة ۱۷۵۱-00۱۳005 (على مبدأ 
الجرائد) بطريقتين: 

الأولى - عدد أعمدة ثابت و عرض عمود متغير: و يتم ذلك من خلال إسناد عدد الأعمدة إلى 
الخاصية 00۱0۳۱۲-60۷۳ التي تقسّم المحتوى إلى العدد المذكور من الأعمدة» و يتغير عرض 
الأعمدة مع تغير حجم نافذة المستعرض. 


الثانية- عرض عمود ثابت و عدد أعمدة متغير: و يتم ذلك من خلال عرض العمود الواحد إلى 


الخاصية 60۱۳۱-۷۷۱01 و المسافة بين كل عمودين إلى الخاصية ۰001۲۱۳۲-۵90 و في هذه 


الطريقة تحافظ الأعمدة على عرض تابت لكل منها و يتغير عددها مع تغير حجم نافذة 
ملحوظة: تستخدم نفس البادئات المذكورة سابقاً مع خصائص الأعمدة المتعددة. 
المثال التالي يعرض انشاء الأعمدة المتعددة بالطريقة الاولی: 


> ۱001۲۲ IMG 110ظ07اظ‎ ۳۲-۸۲۲30۲۲۲ TMG 4.01 ۳2091 0 ۲۳ 
HEED ۲۱۲۰ ۲3 ۰ ۵159/۲5/۲۲۲4 160056 ۰.0۳ 


> 
<head> 
<style type="text/css"> 


. newspaper 


{ 


-webkit-column-count : 3; 
} 
</style> 
</head> 
<body> 
<div class="newspaper"> 


this 15 a sample content this is a sample content this is a 


sample content this is sample content this is sample content 


ERIS AS 2 SeMOle اطه‌اطهی‎ ENS MS 2 SAMPLE CONEeRNE EMS و1‎ 2 


sample content this is sample content this is sample content 


this is a sample content this is a sample content this is a 


5217016 COM sample content this is 5217016 EO ECE 


2 و1 CLS‏ علدت ع سوك SAME‏ 2 ود COMEENE EMS‏ هو a‏ ود Enns‏ 


sample content this is sample content this is sample content 


this is a sample content this is a sample content this is a 


sample content this is sample content this is sample content 


و 

0 

J) 

62 

و 

بر 

ابم 

n 

د 

n 
51 اللا‎ EE MD e الل‎ E OF CaF WF SEE 
61 O TEE لذ نس الث‎ E OF CAF OF EF 


this is a sample content this is a sample conten 


this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content. 


يبدو المثال السابق في مستعرض الويب كمايلي: 


this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 


دام > 


</body> 


۲ © firstPage.html 
ج‎ © © file:///C:/Users/Mukhtar/Desktop/firstPage ۲۲  ™ 


this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 
this is a sample content 


الشكل 5ه : إنشاء محتوی بأعمدة متعددة محددة العدد. 


> ۳۲1 


یمکن وضع فواصل ذات مظهر و لون محددین بين الأعمدة عن طریق الخاصية 60۱۲۳۳۴-۲۲16 
بشکل مشابه للمثال التالي: 


column-rule: 4px dotted black; 


CSS3 User Interface واجهة المستخدم‎ 


بالاضافة ما قسته 0553 من يزات لمن يني لهات الزیب تك ست مسموعة من 


التحسينات للمستخدم النهائي للصفحة عبر الخصائص التي يعرضها الجدول التالي: 


الخاصة 


7 


appearance 


icon 


nav-down‏ و 
nav-left‏ و 

nav-right‏ و 
nav-up‏ 


nav-index 


resize 


محددات 0553 


القيم الممكنة 


normal‏ أو icon‏ أو 
button ڪyİ window‏ أو 
menu‏ أو field‏ 


auto‏ أو inherit‏ أو رابط 


لصورة 

auto‏ أو inherit‏ أو 
اسم إطار 

عدد صحيح و مميز 


none‏ أو horizontal‏ أو 


both أو‎ vertical 


الشرح 
تحدد لمستعرض الویب كيفية (شکل) 
عرض العنصر ضمن المستند 


تتیح جعل عنصر ما بشکل أيقوني 


تحدد أين سیتم الانتقال عندما یضغط 
المستخدم على مفاتیح الأسهم في لوحة 
المفاتیح 


یحدد العدد المسند الیها عدد ضغطات 
مفتاح 120 اللازمة للانتقال إلى العنصر 
أو بشکل آدق تسلسل الانتقال بين العناصر 
عند الضغط على مفتاح 120 

تحدد فيما إذاكان من المسموح للمستخدم 


تغيير حجم أحد عناصر 0:۷ بشكل يدوي 


الشكل 55 : خصائص واجهة المستخدم الجديدة في 6553© 


تم إضافة مجموعة من المحددات الجديدة في C553‏ نعرضها في الجدول التالي: 


1301-2 


tag[attribute“=v] 


p~ul 


a[href^="https"] 


كل عنصر قائمة غير مرتبة مسبوق 
كل عناصر الروابط التي تبدأ قيم 
واصفتها ۱۳۵۲ بالقيمة https‏ 


]20]200۲100/165-۷[ 


tag[attribute * =v] 


:first-of-type 


:last-of-type 


:only-of-type 


:only-child 


:nth-child(n) 


:nth-last-child(n) 


:nth-of-type(n) 


:last-child 


:root 


:empty 


a[href$=".xml!"] 


a[href*="micro"] 


p:first-of-type 


p:last-of-type 


p:only-of-type 


p:only-child 


p:nth-child(2) 


p:nth-last-child (2) 


p:nth-of-type(2) 


p:last-child 


:root 


p:empty 


كل عناصر الروابط التي تشير إلى 
ملفات من النوع [10. 

كل عناصر الروابط التي تشير إلى 
عناوين تحوي القيمة ۲۱۱۵۲0 

تحديد كل عنصر <> يكون العنصر 
الابن الأول من نوعه بالنسبة لعنصره 
الأب 

تحديد كل عنصر <> يكون العنصر 
الابن الأخير من نوعه بالنسبة لعنصره 
الأب 

تحديد كل عنصر <> يكون العنصر 
الابن الوحيد من نوعه بالنسبة لعنصره 
الأب 

يحدد كل عنصر <0> يكون الابن 
الوحيد لعنصره الأب 

يحدد كل عنصر <0> يكون الابن 
الثاني لعنصره الأب 

يحدد کل عنصر <0> يكون الابن 
الثاني لعنصره الأب مع بدء العد من 
الابن الأخير 

يحدد کل عنصر <0> يكون الابن 
الثاني لعنصره الأب 

يحدد كل عنصر <0> يكون الابن 
الأخير لعنصره الأب 

يحدد العنصر الجذر للمستند 


يحدد کل عناصر <0> عديمة 


:target 


:enabled 
:disabled 


:checked 


:not(selector) 


::selection 


#news:target 


input:enabled 
input:disabled 
input:checked 

:not(p) 


::selection 


المحتوى 

يحدد عنصر #٣٥۴۷‏ الفعال 
حاليأً(الذي تم الوصول إليه عبر النقر 
على رابط يشير إليه داخلياً) 

كل عناصر الإدخال المفعلة 

كل عناصر الإدخال غير المفعّلة 

كل عناصر الإدخال المختارة 

كل العناصر عدا عناصر <0> 

جزء العنصر الذي قام المستخدم 


بتحديده 


الجدول ۱۰ : المحددات الجديدة في 06853 


الخاتمه 


بهذا نکون قد وصلنا إلى نهاية حدیثنا عن 0553 و بهذا یکون الکتاب قد وفی بوعده بشرح لغتي 
5و 0553 بشکل مکتّف و بسيط و بهذا تكون أنت قد قطعت ربع المسافة في مشوار 
تعلم برمجة الویب و هنا قد تتساءل : و ماذا بعد؟ و في الحقيقة فإن الخطوة التالية (کما آزعم) 
هي أن نتعلم 561101 ۷۵ أو [/©لا©[ ثم تأتي الخطوة المهمة في تعلم إحدى لغات البرمجة من 
طرف السیرفر مثل ۳۱۳۴ أو ۸٩۳۰/۶۲‏ لتكون قد قطعت 9985 من الطریق نحو لقب مطور 
ويب ۲۵۷۵۱006۲ ۷۷۵۵ آما ال %٠١‏ الباقية فتكمن -برأيي- في عملية نفض الغبار و الأتربة 


عما تعلمته و الابقاء علی الدر الشمین فقط و تهذییه عبر القزاءة المستمرة و المتابعة الدائمة. 


آتمتی أن يكون كتابي هذا قد ساهم في إعطائك فكرة جيدة عن لغتي ۲۱۲۲5 و 0553 و أسأل 
الله أن يكون أسلوبه في عرض الافکار قد راقك و أرضاكء أمّا الآن فسأتركك برعاية الله و حفظه 
و سأدعو لك برحلة هادئة و ممتعة في عالم التطوير للویب و أنوّه أتني ما أزال أحبو في عالم 
الویب و أتعلّم و أرحّب بأي اقتراح أو استفسار على بريدي الإلكتروني 


۵17 ۲۱۵/۲۱۲۵۲ و السلام عليكم و رحمة الله و بركاته. 


15 


الفهارس 


1٤ 


فهرس الاشکال 


الشكل ۱ : كتابة أول شيفرة ا1 في برنامج المفكرة و حفظ الملف لم اا 
الشکل ۲ : الشکل النهائي في المستعرض لاوّل صفحة مكتوبة باستخدام ۳۱۲۱ ۱ 
الشكل ۳ : عنصر عرض النصوص <0> عند إضافة واصفة المحاذاة ٩1190‏ 1 0000000 
الشكل 4 : صفحة اختبار عناصر العناوين EA ARE‏ 
الشكل © : صفحة تجربة العنصر </ ۸۲> TEES AS AS‏ ا 
الشكل ٠‏ : التعليقات تظهر باللون الأخضر في نافذة عرض المصدر و لا تظهر في الصفحة. ۳۰ 
الشکل ۷ : صفحة اختبار عناصر تنسیق النصوص saa‏ 
الشکل ۸ : مثال لاستخدام بعض المحارف الخاصة في الصفحة 0 هت ۱۳ 
الشكل ٩‏ : صفحة اختبار عنصر الروابط E aT‏ 
الشکل ۱۰ : صفحهة اختبار لعنصر الصور RSS MESES‏ 
الشكل ۱۱ : استخدام الصور بدلا عن النصوص کمحتوی للروابط e‏ 
الشکل ۱۲ : مثال على صنع خريطة صورية E OT‏ و ی ۲۶ 
الشکل ۱۳ : شکل تخيلي لتوضیح المبدأ الهندسي في رسم المناطق الا ی 2۳ 
الشکل ۱ : متال لقائمة غير مرتبة بسيطة 00 هه CO‏ 
الشکل ٠١‏ : متال على قائمة مرتبة بسيطة SR OSE IR‏ بیس 9 2 
الشکل ۱۰ : مثال على قائمة معقدة م او و ی 2 
الشكل ۱۷ : هكذا تبدو قائمة المصطلحات في المستعرض RN‏ 
الشكل ۱۸ : شكل تخيلي لتوضيح الوسوم المستعلمة لانشاء الجدول Oa.‏ 
الشکل ۱٩‏ : مثال على انشاء جدول بسيط SE O‏ 
الشکل ۲۰ : رسم توضيحي لاقسام الجدول في ۳۱۲۱/۲ و ا 
الشکل ۲۱ : مثال لانشاء جدول ۲۱۲ مثالي OO SS ES EA E A‏ 


: مثال على انشاء جدول غير بسيط باستخدام الواصفتین ۲0۷۷5۵3۲0 و 6015081. لاه 
: مثال على إنشاء نموذج بسيط مار ا را ل SESS‏ 
انشاء نموذج أعقد بقلیل E‏ ةا ۳ ۱۱ 
مثال على استخدام checkbox‏ و CER 1 1 1 1 1 1 radio‏ 
مثال على استخدام عنصر ]86160 ا نط سه ال الاق لق ا TOES‏ 
: مثال على استخدام العنصر 6:12۲62] OV [1 soe ne oe‏ 
: مثال على استخدام ns Seles fieldSet‏ که 
: استخدام الإطارات بشكل عمودي NA an‏ 
: استخدام الإطارات بشكل أفقي Vas SSeS‏ 
عنصر عرض الفيديو الجديد كما يبدو في مستعرض جوجل کروم ANE‏ 
عنصر عرض الصوت الجديد كما يبدو في مستعرض جوجل کروم NS‏ 

: عناصر الإدخال الجديدة كما تبدو في مستعرض کروم ره 
استخدام خصائص مظهر النصوص ا 1[ E‏ 
استخدام خصائص الخطوط ی aS‏ 
هكذا تبدو صفحة اختبار مظهر الروابط لحظة النقر على الرابط الثالث و بعد زيارة 
a‏ امل مف و کت ف ا essed‏ ی ی و انا و موه ل ال VAN‏ 
: هکذا تبدو صفحة اختبار خصائص الخلفية نی ای ی 
: هکذا تبدو صفحة اختبار خصائص مظهر القوائم في مستعرض الویب و ۱۱ 
: توظيف 055 لتنسيق مظهر الجداول ا و 111 
: مثال على استخدام خصائص موضّعة العناصر في 055 وا ا ا 
: مثال على استخدام الخاصية 2-1016 AS‏ [ز[ز [ز[ |[ Nee‏ 
: مثال على عرض أشرطة التمرير للعناصر ذات المحتوى الكبير ا 
: نموذج الصندوق ۲۱۵06 00 اا ی DE‏ 


الشکل 55 
الشکل ٤٥‏ 
الشکل 55 
الشکل ۶۷ 
الشکل ٤۸‏ 
الشکل ٩‏ 
الشکل ۰ ۵ 
الشکل ١ه‏ 
الشکل ۵۲ 
الشکل ۵۳ 
الشکل > ه 
الشکل ۵ ه 
الشکل 5ه 


: مثال على استخدام خصائص الازاحة الداخلية مد A‏ 
: مثال على استخدام خاصية الإزاحة الخارجة ۲02۲910 ا ا SS‏ 
: مثال على استخدام خاصية التعويم float‏ 11111111100 
: استخدام القاعدة O SEES N E RO @media‏ 
: استخدام القاعدة eines ose @media‏ 
: استخدام خاصية 0۲۵8۲-۲۵۵15( في مستعرض کروم ES‏ 
: الإطارات الصورية في 06553 دب O‏ 
: الإطار الصوري في مستعرض جوجل كروم OE CE‏ 
: خاصية الظل كما تبدو في مستعرض كروم ی EO‏ 
: نموذج الصندوق بالنسبة لخاصية الخلفية في 693 000 
: مثال على تحویل 516۷ في مستعرض جوجل کروم RS‏ 
: إنشاء محتوى بأعمدة متعددة محددة العدد. SA Saa.‏ 


: خصائص واجهة المستخدم الجديدة في 553) 717111011101000 


۱۰۷ 


1۸ 


فهرس الجداول 


الجدول ۱ : جدول الواصفات المشتركة بين أغلب عناصر 11/1 لا ی ی ی 
الجدول ۲ : بعض المحارف الخاصة في ۳۱۲۱/۲ ی 
الجدول ۲ : القیم المخنلفة للواصفة 1۷06 الخاصة بعنصر <لا۱00> اه ی هن نه 
الجدول ؛ : دليل وسوم !۳۱۲۷ SDA SENSES SS‏ 
الجدول ١‏ : واصفات العنصر <۷۱00> ا لماك ی هه یماسا 
الجدول 1 : واصفات العنصر <1/1060> SDSS‏ 
الجدول ۷ : آنواع عناصر الادخال الجديدة في 5 ۳۱۲۱/۲ کی ES‏ 
الجدول ۸ : بعض طرق کائن العنصر <0311/35> ی و ای کی و دای شا دم 
الجدول ٩‏ : دليل الوسوم الجديدة في 5 ۳۲۱۲/۷ و 
الجدول ۱۰ : واحدات القیاس في 85 ا و و ی 
الجدول ١١‏ : قيم القاعدخ ESS SS RE @media‏ 
الجدول ۱۲ : محددات ور) لح ا EEE SEA‏ ی و 
الجدول ۱۳ : خصائص تتسیق النصوص الجديدة في 53 ا لق ه ا او با 
الجدول ۱4 : توابع التحویل الهندسي ثنائي البعد في 5583© 9 هو 
الجدول ۱۵ : التحويلات الهندسية ثلاثية الأبعاد في 6553© 1 N‏ 
الجدول ٠١‏ : المحددات الجديدة في 6553© A‏ ا یه 


۱۷۰ 


فهرس المحتویات 


الإهداء Vedula daemons‏ 
تنويه NE ONE RONSON OS‏ 
بين يدي الکتاب ملساو اساسا Me AERO SAS‏ 
مقدمة SES SER SE‏ ار O SA‏ 
ما هي ۲۲۷۱ ؟ موه لاماي الأ ی VOSS O SRR‏ 
كيف أبدأ في تعلم كتابة مستندات ۱۱۲۱۸ ؟ 1 
المثال الأول في لغة 1۲١۷1‏ 6 ااا 0 1 اال 
عناصر ۳۱۲ ARES ORR‏ رک ی ی ددم EASE‏ 
الفراغات Sea a Se ۷۷۲۱۲۶ SPACES‏ دب00010 TA‏ 
الشکل العام لعناصر ۲۱۲۱۸ eee‏ دلموا مه عم 1 7 
الشکل العام لصفحات HTML‏ کر ی ی ۱ 
واصفات الوسوم ۸۲۲5۵1۲25 امقاماق ا لا SSS‏ ی یش ۲۱ 
عناصر العناوین ۳۱۶۸۵۱۱۵5 و و ی ی SS‏ مه هه TUS‏ 
عنصر الخط الأفقي HORIZONTAL LINE‏ ری a‏ هم رمع موف ۵ ۲ ۲ 
التعليقات COMMENTS‏ اه Tae‏ 
عناصر النصوص ۳۸6۸۵6۸۴۲۵ Feo e SRS SRA‏ 


عناصر تنسیق النصوص ۲۵8۱۸۲۲۱ اع ماه و ویر و ام مخ و و ا و 


المحارف و الرموز الخاصّة Special CHARACTERS‏ الل ع معاي حو انج ا و 


RL HYPER LINKS عناصر الروابط‎ 


عناصر الصور ۱۸۵2۲۵ ROE‏ 
الصور بدلاً من نصوص الروابط e‏ 
الخرائط الصوريّة ۱/۸25 ۱۱۸۵۶ و ۵ 
الروابط الداخليّة e INTERNAL LINKING‏ 
القوائم ۱۱975 N ROT‏ 
الجداول 1۸825 و 
الجداول غير البسيطة وی وک 


E EE FORMS النماذج‎ 


e RR FRAVES الاطارات‎ 
eee ۸/۲۸ عناصر ال‎ 


دلیل وسوم ا1۲۷ 5 ی 


قواعد XHTML‏ ا ی 
تعریف نوع المستند <ع۱000۲۷۳> .... 
الأنواع المختلفة للمستند E‏ 


التحقق من صحة صفحات 111/1 ... 


مستعرضات الويب الداعمة ل 5 ۳۱۲۲/۸ Neier‏ 
عنصر الفیدیو ۷۱020 ESASA SR‏ 101 
عنصر الصوت ۸90 ال ط توم NOES OE ROSES AR‏ 
عناصر النماذج ۴0۸۷8 AS‏ هن أله عله فلع ظعاو جا و Nessa‏ 
عنصر المَرسم 0۸۱۷۸۵ en‏ رم ل ال لق أو ا QS SESS‏ 
تخزین البیانات من طرف العمیل eee‏ وم موف ٩۱‏ 
دليل الوسوم الجديدة في 5 ۲۱۲۷ ATR RONG‏ 
مقدمة SAREE‏ لواو د فا لوا وا أ ل اط لول لط لط Vee‏ 
ما هي 055 ؟ AVA SE O ESSERE SS‏ 
مشكلة مطوري الويب قبل 085 O E‏ 
البدء في استخدام 085 SOL‏ ی ARRAS‏ [ 0110111 
شیفرات 655 ara eS eA ERRsA‏ 
خصائص مظهر النصوص iad‏ یی ae‏ رک مه ۱ ۷۵ 
خصائص الخطوط ۴۵۱۲۵ و See‏ و و وت مه وی وه ۱۷۹۵۹۲ 
خصائص مظهر الروابط Neoseek‏ 
خصائص الخلفیات a BACKGROUNDS‏ ی مه کت 9 
خصائص مظهر القوائم ی 
خصائص مظهر الجداول TEESE‏ 
خصائص الموضعة ۳۵6۱۲۱۵۸۱۲۵ EES ESAS‏ مه ۷۱۲۱ 


واحدات القیاس فى 685 اط افك ی بو لعا ی و 
نموذج الصندوق 80*002 CSS‏ املاط ا es‏ 


aA RES BORDER خصائص الحدود‎ 


الشفافية 0۳۸6۱۲۷ مام ا با 
التّعويم FLOATING‏ لم واه من ا REO‏ 
تعلیقات 695 O yy‏ 
آنواع الوسائط a MEDIA TYPES‏ 


دليل محددات 655 م اق ا ی ا تايه 


المستعرضات الداعمة 00000 
الحدود الجدیدة BORDERS‏ 6853 ۳[ 
الخلفیات الجديدة 6۸0۲۵8005 6853 5 رو 
خصائص تتسیق النصوص الجديدة في 0553 ی 
خصائص الخطوط الجديدة في 6553© 517101110 
التحويلات الهندسية ذات البعدين ۲6۸5۲06۸۲۱0۱ 2D‏ 


التحويلات الهندسية ثلاثية الأبعاد ۲۸6۲05۸۳6 30 


۱۷۳۹ 


التحصیل 


عن موف الکتاب 


علميّة 
الاسم الصريح : مختار فؤاد 
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مکان و تاريخ المیلاد : سوریا 
- البوکمال - ۹۸۹ ۱م. 


(سيرة ذاتية) 


الاسم المستعار للاعمال الأدبيّة : مختار 
الكمالي. 


ماجستير في تقانات الويب - الجامعة الافتراضيّة السوريّة - طالب حتّى 


تاريخه. 


إجازة في هندسة الحاسوب و المعلوماتيّة بمعدّل جيّد جدَاً - الجامعة السّوريّة 


الدوليّة - ۲۰۱۱. 


ثانويّة عامّة - الفرع العلمي - ثانويّة فايز منصور بالبوكمال - ۲۰۰. 


مهندس برمجيّات ويب - بين 
عسامي ۲ و ۲۰۱۳ - 
شركة عجرم للتكنولوجيا - 
دمشق. 

مهندس برمجیات - عمل حر 
-بينَ عصامّي ۲۰۰۶ و 
۰۰ ۰« 


٠‏ متفرّغ للعمل الابداعي منذ عام 
۳ 
م .بدا شا را عاميّاً ثمَّ انتقل للشعر 


الفصیح في بداية ED‏ 


من ۰ مشروع الفراهيدي من النظرية ۰ في غیابة | لحب - شعر - دائرة 


اصداراته حتّى التطبیق البرمجي - کتاب التقافة و الاعلام بالشارقة - 
الکتروني مجاني - دمشق 3 
۰.۳« 


هء 0/893 & ۲۱۲۱/5 الخطوة 
الأولى نحو ویب المستقبل - 
كتاب الکتروني مجاني - 
البوکمال - ۲۰۱۳. 

٠‏ تعلّم ۵60۷[ في ۱۲۰ دقيقة 
- مكتبة المورد للكمبيوتر - 
دمشق - ۲۰۱۰. 

Game ۹010 ۰‏ (3 طريقك 
نحو برمجة الالعاب - ملحق 
مجّاني مع مجلّة ۲1 التقنيّة 
- دمشق ۲۵۱ 
المقالات التقنيّة في عدد من 
المجلت المطبوعة و 
الإلكترونيّة المتخصصة. 


][ Programming Languages: مهارات‎ 
العمل‎ 
e Desktop: C#, VB.NET, ١/86, Java. 3 
البرمجیه‎ 
۰ Web: 


o Server-Side: ASP.NET classic and ASP.NET MVC, 
PHP Classic & PHP MVC using Codelginiter 


framework., JSP. 


الجوائز و 
المشارکات 


o Client-Side: HTML 5, CSS 3, java script & ۷ ۰ 


o Technologies: XML, JSON. 


e Smart phones: Android programming. 


[] Database: SQL Server, MySQL, MS-Access. 


مسابقة أفضل برمجة و تصميم 
موقع ويب بتقنيّة ۸5۳۰۱۶۲ 
المنظّمة من قبل موقع 
المبرمجین - vb4ara6.٥0۳"‏ 
المرکز الاوّل عن مشروع موقع 
مدينة أبوكمال - عام ۲۰۰۹. 
مسابقة المعلوماتية المركزية 
الثالثة عشرة - جامعة البعث - 
حمص .۲۰۰٩‏ 

المؤتمر العلمي الثاني - 
الجامعة السورية الدولية للعلوم 
و التكنولوجيا - دمشق ۲۰۰۸. 
أولمبياد المعلوماتيّة السوري 
الراببع - الجمعية العلمية 
السورية للمعلوماتية - دمشق 
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مسابقة المعلوماتية المرکزية 
الحادية عشرة - جامعة البعث 


حمص ۷ 


Misc.: MS-Word, MS-PowerPoint, Photoshop, Maintenance‏ لا 


skills 
- تصفيات مهرجان أمير الشعراء‎ 
الموسم الخامس - الامارات‎ 
۰۲۰۱۳ - العربيّة المتحدة‎ 
- جائزة الشارقة للإبداع العربيَ‎ 
الإمارات العربيّة المتحدّة - المركز‎ 
.۲۰۱۱ - الأول‎ 
- تصفیات مهرجان أمير الشعراء‎ 
الموسم الرابع - الامارات العربيّة‎ 
.۲۰۱۱ - المتحدذة‎ 
- جائزة الابداع التشعريّ للطلبة‎ 
الجامعة السورية الدولية - المرکز‎ 
.۲۰۱۲۰ - الأول‎ 
شارك في عدد کبیر من الأمسيات‎ 
و المهرجانات النعرية داخضل‎ 


سوریا. 


العناوین 


مسابقة المعلوماتية المركزية 
اللاذقيّة .٠٠٠٠١‏ 

الملتقى الخامس للإبداع و 
الاختراع (ورشة البرمجيّات) - 
حماة ۲۰۰۵. 

الملتقی العربي الثالث 
للمبرمجين الشباب (ورشة 
البرمجیات) - حلب 6 ۲۰ بت 
المركز الثالث عن مشروع نظام 
مكاتب الحوالات الصوتي ۲. 
أولمبياد المعلوماتيّة السوري 
الأول - الجمعية العلمية 
السورية للمعلوماتية ۳ دمشق 
۲۰۰ - الميدالية الفضية. 


العنوان الحالي : سوریا - دمشق 
بريد إلكتروني : 550۳01۳0311.0070_ ۲۱۵۱6۱1۵۲ 


